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="&lt ;div style="z-index: 999; 위치: 절대;">"
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", "선택됨");});
$(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 코드:

코드 복사

코드는 다음과 같습니다. <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

{
배경색: 파란색
색상: 흰색; ;/style>
<script type="text /javascript">
$(function(){
Jselect($("#txt_wbk"),{
bindid:'txt_wbk' , //버튼에 바인딩할 수 있습니다. 여기를 클릭하세요. 텍스트 상자에 드롭다운 상자가 표시됩니다.
hoverclass:'hover',
optionsbind:function(){return hqhtml();}
} );
})
function hqhtml(){// 여기서 데이터베이스에서 값을 가져온 후 html을 연결할 수 있습니다. 참고: 사전 옵션
var optionshtml에 lang='checked' 속성을 추가하세요. ="<테이블 스타일='너비:100%; 배경색: 빨간색' cellpadding= "0" cellpacing="0" >"
　　　"<tr><td 스타일='너비:20px' ><input type="checkbox" value='1' /></ td><td>첫 번째 항목</td></tr>"
　 "<tr>< td><input type="checkbox" value='2' lang='checked' /></td><td>두 번째 항목</td></tr>"
　 "&lt ;tr><td><input type="checkbox" value='3 ' /></td><td>세 번째 항목</td></tr>"
"&lt ;tr><td><input type="checkbox" value=' 4' /></td><td>네 번째 항목</td></tr></table>" ;
반환 옵션html;
}
</script>
<div>
<input id="txt_wbk" type="text" style="width: 200px;" />드롭다운 상자 테스트
</div>