有一个选择(多个)选择字段的表单完美地工作。当您单击图像时,这种形式的隐藏(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);}
谢谢