基于jquery的checkbox下拉框插件代碼

更新時(shí)間：2010年06月25日 19:29:29 作者：

風(fēng)雲(yún)初次編寫插件，望高手指點(diǎn)，基于jquery的checkbox下拉框插件

option_check.js代碼：

 
/***************************************** 
調(diào)用方法為： 
Jselect($("#inputid"),{ 
bindid:'bindid', 
hoverclass:'hoverclass', 
optionsbind:function(){return hqhtml();} 
}); 
inputid為下拉框要綁定的文本框id 
bindid為點(diǎn)擊彈出/收回下拉框的控件id 
hoverclass為鼠標(biāo)移到選項(xiàng)時(shí)的樣式 
hqhtml為綁定的數(shù)據(jù) 
******************************************/ 
(function($){ 
$.showselect = { 
init : function(o,options){ 
var defaults = { 
bindid : null, //事件綁定在bindid上 
hoverclass:null, //鼠標(biāo)移到選項(xiàng)時(shí)樣式名稱 
optionsbind:function(){} //下拉框綁定函數(shù) 
} 
var options = $.extend(defaults,options); 
if(options.optionsbind!=null){//如果綁定函數(shù)不為空 
this._setbind(o,options); 
} 
if(options.bindid!=null){ 
this._showcontrol(o,options); 
} 
}, 
_showcontrol:function(o,options){//控制下拉框顯示 
$("#"+options.bindid).toggle(function(){ 
$(o).next().slideDown(); 
},function(){ 
$(o).next().slideUp(); 
}) 
}, 
_setbind:function(o,options){//綁定數(shù)據(jù) 
var optionshtml="<div style=\"z-index: 999; position: absolute;\">" 
+options.optionsbind()+"</div>"; 
$(o).after(optionshtml); 
var offset= $(o).offset(); 
var w=$(o).width(); 
$(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,width:w}); 
if(options.hoverclass!=null){ 
$(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);}, 
function(){$(this).removeClass(options.hoverclass);}); 
} 
$(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");}); 
$(o).next().find("input[type=checkbox]").click(function(){ 
var $ckoption=$(this).attr("checked"); 
if($ckoption){ 
$(this).attr("checked",""); 
}else{ 
$(this).attr("checked","checked"); 
} 
}); 
$(o).next().find("tr").click(function(){ 
var $ckflag=$(this).find("input[type=checkbox]"); 
if($ckflag.attr("checked")){ 
$ckflag.attr("checked",""); 
$ckflag.attr("lang",""); 
} 
else{ 
$ckflag.attr("checked","checked"); 
$ckflag.attr("lang","checked"); 
} 
var selarray=new Array(); 
$(o).next().find("input[type=checkbox]").each(function(){ 
if($(this).attr("checked")) 
selarray.push($(this).parent().next().text()); 
}); 
$(o).val(selarray.join(',')); 
}); 
$(o).next().hide(); 
} 
} 
Jselect = function(o,json){ 
$.showselect.init(o,json); 
}; 
})(jQuery); 

html代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="option_check.js"></script> 
<style type="text/css"> 
.hover 
{ 
background-color: Blue; 
color: White; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
Jselect($("#txt_wbk"),{ 
bindid:'txt_wbk', //可綁定到按鈕上，此處為點(diǎn)擊文本框顯示下拉框 
hoverclass:'hover', 
optionsbind:function(){return hqhtml();} 
}); 
}) 
function hqhtml(){//此處可在數(shù)據(jù)庫中取值后拼接html，注意：預(yù)選項(xiàng)加上 lang='checked'屬性 
var optionshtml="<table style='width:100%; background-color: Red' cellpadding=\"0\" cellspacing=\"0\" >“ 
　　　　　　　　　　+”<tr><td style='width:20px'><input type=\"checkbox\" value='1' /></td><td>第一項(xiàng)</td></tr>" 
　　　 +"<tr><td><input type=\"checkbox\" value='2' lang='checked'/></td><td>第二項(xiàng)</td></tr>" 
　　 +"<tr><td><input type=\"checkbox\" value='3' /></td><td>第三項(xiàng)</td></tr>" 
+"<tr><td><input type=\"checkbox\" value='4' /></td><td>第四項(xiàng)</td></tr></table>"; 
return optionshtml; 
} 
</script> 
<div> 
<input id="txt_wbk" type="text" style="width: 200px;" />下拉框測試 
</div> 