显示不正确选择/ jQuery

时间:2014-01-19 18:10:31

标签: javascript jquery html

有一个选择(多个)选择字段的表单完美地工作。当您单击图像时,这种形式的隐藏(display: none ;)和另一种形式(它在页面加载display: none ;时隐藏)poyavlyaetsya.V它也有一个字段选择,但它们不起作用,因为落叶没有区域选择一个字段,并在网站的顶部。由于隐藏了块,因此ykri无法计算位置。 告诉我如何解决这个问题?

selectbox.js

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 个答案:

没有答案