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, //イベントは、binidid の
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;position:Absolute;">"
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("チェック済み","チェック済み"); "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 コード:




コードをコピー


コードは次のとおりです:

ドロップダウン ボックス テスト