Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Rei555
0 / 0 / 0
Регистрация: 28.11.2013
Сообщений: 62
1

Событие, закрытия selectBox

09.02.2014, 19:46. Просмотров 439. Ответов 5
Метки нет (Все метки)

Добрый вечер.
Есть скрипт.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
function selectBox(optionArr){
    this.properties = {
        labelClass: 'label',
        arrowClass: 'arrow',
        dropdownClass: 'dropdown',
        dataClass: 'data',
        elementsIDs: [] 
    }
    var _self = this;
    
    this.Init = function(options){
        _self.properties = $.extend(_self.properties, options);
        for(var m in _self.properties.elementsIDs){
            _self.initBox(_self.properties.elementsIDs[m]);
        }
        _self.initBg();
    }
    
    this.initBg = function(){
        $('body').append('<div id="select_box_bg"></div>');
        $('#select_box_bg').css({
            'display': 'none',
            'position': 'fixed',
            'z-index': '98999',
            'width': '1px',
            'height': '1px',
            'left': '1px',
            'top': '1px'
        });
    }
    
    this.expandBg = function(box_id){
    
        $('#select_box_bg').css({
            'width': $(window).width()+'px',
            'height': $(window).height()+'px',
            'display': 'block'
        }).bind('click', function(){
            _self.closeBox(box_id);
        });
        
    }
    
    this.collapseBg = function(){
        $('#select_box_bg').css({
            'width': '1px',
            'height': '1px',
            'display': 'none'
        }).unbind();
    }
    
    this.initBox = function(box_id){
        if($('#'+box_id+'_box').length<1) return;
        _self.createDropDown(box_id);
        $('#'+box_id+'_box, #'+box_id+'_dropdown').bind('click', function(){
            if($('#'+box_id+'_dropdown:visible').length > 0){
                _self.closeBox(box_id);
            }else{
                _self.openBox(box_id);
            }
        });
        $('#'+box_id+'_dropdown li').live('click', function(){
            _self.setActiveBox(box_id, $(this));
        });
    }
    
    this.openBox = function(box_id){
        
        $('#'+box_id+'_dropdown').css({
            'width': $('#'+box_id+'_box').width()+'px',
            'left': $('#'+box_id+'_box').offset().left+'px'
        });
        _self.expandBg(box_id);
        $('#'+box_id+'_box').addClass('focus');
        $('#'+box_id+'_dropdown').slideDown();
    }
    
    this.createDropDown = function(box_id){
        var data = $('#'+box_id+'_box .'+_self.properties.dataClass).html();
        $('body').append('<div class="'+_self.properties.dropdownClass+'" id="'+box_id+'_dropdown">'+data+'</div>');
        var top = $('#'+box_id+'_box').offset().top + $('#'+box_id+'_box .label').outerHeight();
        $('#'+box_id+'_dropdown').css({
            width: $('#'+box_id+'_box').width()+'px',
            left: $('#'+box_id+'_box').offset().left+'px',
            top: top +'px'
        });
    }
    
    this.closeBox = function(box_id){
        _self.collapseBg();
        $('#'+box_id+'_box').removeClass('focus');
        $('#'+box_id+'_dropdown').slideUp();
    }
    
    
    
    
    
    
    
    this.setActiveBox = function(box_id, item){
        $('#'+box_id+'_dropdown li').removeClass('active');
        item.addClass('active');
        $('#'+box_id+'_box .'+_self.properties.labelClass).html(item.text());
        current = $('#'+box_id).val();
        if (current=="") {
            current = item.attr('gid');
        } else{
            var myArray = current.split(',');
            var vall = item.attr('gid');
            if ($.inArray(vall, myArray)!="-1") {
                myArray.splice($.inArray(vall, myArray), 1);
            } else {
                myArray.push(vall); 
            }
            current = myArray.join(',');
        }
        $('#'+box_id).val(current).change();
        //alert(item.children('input[type=radio]'));
        //item.children('input').attr('checked')='checked';
    }
    
    
    
    
    
    this.resetValues = function(box_id, data, selected){
        if(!selected) selected = $('#'+box_id).val();
        var selected_used = false;
 
        $('#'+box_id+'_dropdown > ul > li[gid!=""]').remove();
 
        if(data){
            for(var m in data){
                if(data[m].hasOwnProperty('color') && data[m].color != ''){
                    style_str = ' style="background-color:' +data[m].color+ '"';
                }else{
                    style_str = '';
                }
                $('#'+box_id+'_dropdown ul').append('<li gid="'+data[m].id+'"'+style_str+' onhover="alert(1)">'+data[m].name+'</li>');
                if(data[m].id == selected){
                    _self.setActiveBox(box_id, $('#'+box_id+'_dropdown li[gid="'+data[m].id+'"]'));
                    selected_used = true;
                }
            }   
        }
        if(selected == 0 || !selected_used){
            _self.setActiveBox(box_id, $('#'+box_id+'_dropdown li[gid=""]'));
        }
    }
    
    this.setLabel = function(box_id, label){
        $('#'+box_id+'_dropdown li[gid=""]').html(label);
    }
    
    _self.Init(optionArr);      
}
Подскажите, как заставить выпадающую область закрываться по клику в любом месте сайта, а не по пункту в этой области.
Спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.02.2014, 19:46
Ответы с готовыми решениями:

событие закрытия окна браузера на javascript
столкнулся с проблемой, что невозможно однозначно определить событие закрытия...

Событие закрытия страницы
доброе время суток, подскажите пожалуйста такую вещь, как написать скрипт на...

Перекрыть SelectBox (ComboBox) на форме
Привет Всем! Помогите перекрыть SelectBox(ComboBox) на форме с помощью слоев....

Изменении формы ввода при выборе из Selectbox
Как сделать так что бы при выборе из селектбокса появлялась нужная форма из...

Как обработать событие click и событие нажития стрелки?
Допустим есть кнопка влево-вправо для горизонтального листания товаров. Как...

5
Lazy_Den
2940 / 2617 / 1319
Регистрация: 15.01.2014
Сообщений: 5,748
09.02.2014, 19:55 2
Сделайте рабочий пример на jsfiddle.net. А то разгребать 150 строк вашего кода, не видя его действия, как-то ломает.
0
Rei555
0 / 0 / 0
Регистрация: 28.11.2013
Сообщений: 62
09.02.2014, 20:38  [ТС] 3
Не получается там запустить, почему то не работает. Вот можете на сайте посмотреть в работе

Сайт
0
Lazy_Den
2940 / 2617 / 1319
Регистрация: 15.01.2014
Сообщений: 5,748
09.02.2014, 21:06 4
Вы про выпадающие списки: "Тип недвижимости", "Количество Комнат", "Диапазон цены"? Если да, то работает, как надо, т.е. закрывается и по клику в любой части страницы. Проверил в FireFox, Chrome, Opera. Про IE (даже 10) и Safari - я лучше промолчу, т.к. сказать что всё очень плохо - это значит ничего не сказать.
0
Rei555
0 / 0 / 0
Регистрация: 28.11.2013
Сообщений: 62
09.02.2014, 21:09  [ТС] 5
Да про них. Только нужно чтобы пока ставлю Галочки, оно не сворачивалось...... (выпадающая область)
0
Lazy_Den
2940 / 2617 / 1319
Регистрация: 15.01.2014
Сообщений: 5,748
09.02.2014, 21:23 6
Цитата Сообщение от Rei555 Посмотреть сообщение
чтобы пока ставлю Галочки, оно не сворачивалось
В чем причина я понял, но исправлять нет желания (не скажу почему). Посмотрите этот плагин, измените стили на свои и получите нужный результат.
0
09.02.2014, 21:23
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.02.2014, 21:23

Предупреждение закрытия вкладки
Привет всем! Подскажите пожалуйста, нашел код, который предупреждает...

Проверка закрытия тегов
Добрый день, уважаемые форумчане. Столкнулся с проблемой: когда...

Обработчик закрытия страницы
Здравствуйте. Вот размещена кнопка на странице(не на форме!!!). Как добавить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru