jqueryカスタムドロップダウンリストのexample_form効果

前回JQカスタムページングプラグインとテーブルプラグインを作って以来、プラグインのカスタマイズをしていませんでした。今月はlinqとefを使っていて、基本的な部分には触れていません。今日は同僚がいます。ドロップダウンボックスにチェックボックスを必要とするプロジェクトがあると言われました。当初はオンラインでプラグインを見つけたかったのですが、よく考えてみると、この機能は実際には難しくありません。そこで私は自分でプラグインを作成し、JQ カスタム プラグインに再度慣れる機会を利用しました。まずレンダリングを添付しましょう:

それほど難しく見えませんが、実際はJQを長期間使用しなくても錆びないように強化することです。大丈夫。私のコードを添付します:

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

(function($){

 var option={
     isEdit:false,  //是否可以编辑:默认是否
     Listheight:200,  //下拉框高度
     ListWidth:0,     //下拉框长度
     //数据源
     data:[
           {"value":1,"text":"选择1"},
           {"value":2,"text":"选择2"},
           {"value":3,"text":"选择3"},
           {"value":4,"text":"选择4"}
           ]
     }
           //开始创建下拉框
          function Start(obj)
          {
              if(!option.isEdit)
              {
              obj.attr({"readonly":"readonly"});
              }
            var      myList=$("

");
var ul=$("

");
ul.css({"list-style":"none","margin":"0px" ,"padding":"2px"});
myList.css({"border":"1px ソリッド #D9E5F3","position":"absolute","overflow-y":"scroll","background -color":"#fff","font-size":"12px"});
if(option.Listheight {
option.Listheight=200;
}
myList.height(option.Listheight);
if(option.ListWidth<=0)
{
option.ListWidth=obj.width()
}
myList.width (option.ListWidth);
//默认位置は创建元素の下方
myList.offset({"top":obj.offset().top obj.outerHeight(),"left":obj. offset().left});
var data=option.data;

if(data.length>0)
{
for(i=0;i {
var li=$("

");
var ListSon=$("");
ListSon.change(function(){
if(this.checked)
{
obj.val(obj.val() $(this).val());
}
else
{
obj.val(obj.val().replace($(this).val(),""));
}
})
myList.mouseover (function(){
myList.show();          
})
myList.mouseout(function(){
myList.hide();
})
var span=$("");
span.text(data[i].text);
ListSon.val(data[i].value ";");
li.append(ListSon);
li.append(span);
ul.append(li);
}
}
myList.append( ul);
myList.appendTo("body");
myList.hide();

FoucsShow($(obj),myList);
}
// whenドロップダウン ボックスが表示されるようにフォーカスを取得します
function FoucsShow(obj,myList)
.createList=function(newoption)
})(jQuery); >
フォアグラウンド呼び出し:





コードをコピー

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

$("#d2").createList ({

//データ ソース

data:[ {"value":"C#","text":"C#"}, {"value":".NET"," text": ".NET"}, {"value":"Java","text":"Java"}, {"value":"JSP","text":"JSP"} 、 {"value"： "c"、 "text"： "c"}、 "、" text "：" javascript "}、

"}、

{"value"： "xml","text":"Mysql"},
,"text":"JQuery"},
CSS3"},
🎜> })