jquery_jquery를 기반으로 하는 확인란 드롭다운 상자 플러그인 코드-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:24:32

원래의

1176명이 탐색했습니다.

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 코드: