jquery_jquery를 기반으로 하는 확인란 드롭다운 상자 플러그인 코드

option_check.js 코드:

코드 복사 코드는 다음과 같습니다.

/*****************************************
호출 방법은
Jselect ($("#inputid"),{
bindid:'bindid',
hoverclass:'hoverclass',
optionsbind:function(){return hqhtml();}
});
inputid는 드롭다운 상자에 바인딩될 텍스트 상자 ID입니다.
bindid는 드롭다운 상자를 팝업/철회하기 위한 클릭의 컨트롤 ID입니다.
hoverclass는 마우스가 움직일 때의 스타일입니다. 옵션
hqhtml은 바인딩된 데이터입니다
************************************ ************* /
(function($){
$.showselect = {
init : function(o,options){
var defaults = {
bindid : null, //The 이벤트는
bindid의 hoverclass:null에 바인딩됩니다. //마우스가 옵션으로 이동할 때의 스타일 이름
optionsbind:function(){} //드롭다운 상자 바인딩 함수
}
var options = $.extend(defaults ,options);
if(options.optionsbind!=null){//바인딩 함수가 비어 있지 않은 경우
this._setbind(o,options); }
if(options.bindid !=null){
this._showcontrol(o,options)
}
},
_showcontrol:function(o,options){//Control 드롭다운 상자 표시
$(" #" options.bindid).toggle(function(){
$(o).next().slideDown();
},function(){
$(o).next().slideUp()
})
},
_setbind:function(o,options){//데이터 바인딩
var optionshtml="< ;div style="z-index: 999; 위치: 절대;">"
options.optionsbind() "

";
$(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", "선택됨");});
$(o).next().find("input[type=checkbox]").click(function(){
var $ckoption=$(this). attr("체크됨");
if ($ckoption){
$(this).attr("체크됨","");
}else{
$(this).attr( "확인됨","확인됨");
}
})
$(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 코드:

코드 복사

코드는 다음과 같습니다.

드롭다운 상자 테스트