jquery自訂下拉式清單樣本

自從上次做了JQ自訂分頁外掛程式和表格外掛程式後，就沒在自訂過外掛程式了，這一個月都在用linq和ef,基本前端都沒怎麼去碰了，今天有個同事說有個項目需要在下拉框裡面帶有複選框，本來想網上找下外掛程式的，一想，其實這功能也並不難，於是就自己做了一個，也趁機再次熟悉下JQ自訂外掛程式吧，好了，先附上先：

看上去沒怎麼難吧，其實就是強化JQ，免得太久沒用，生疏了。好了。附上My Code：

複製代碼 代碼如下:
(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=$("<div></div>");
            var  ul=$("<ul></ul>");
           ul.css({"list-style":"none","margin":"0px","padding":"2px"});
           myList.css({"border":"1px solid #D9E5F3","position":"absolute","overflow-y":"scroll","background-color":"#fff","font-size":"12px"});
           if(option.Listheight<=0)
           {
               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<data.length;i++)
          {
             var li=$("<li/>");
              var ListSon=$("<input type='checkbox' />");
             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></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);
          }
          // 當擷取到焦點使出現該下拉框
          function FoucsShow(obj,myList)
          {
              obj.focus(function(){myList.show()})
          }
          $.fn.createList=function(newoption)
          {
              $.extend(option,newoption);
             Start($(this));

          }
          })(jQuery);

前台調用：

複製代碼 代碼如下:
$("#d2").createList({
     //資料來源
     data:[
           {"value":"C#","text":"C#"},
           {"value":".NET","text":".NET"},
           {"value":"Java","text":"Java"},
           {"value":"JSP","text":"JSP"},
           {"value":"C","text":"C"},
           {"value":"C++","text":"C++"},
           {"value":"javascript","text":"javascript"},
           {"value":"ajax","text":"ajax"},
           {"value":"json","text":"json"},
           {"value":"xml","text":"xml"},
           {"value":"sql server","text":"sql server"},
           {"value":"xml","text":"Mysql"},
           {"value":"oracle","text":"oracle"},
           {"value":"JQuery","text":"JQuery"},
           {"value":"Ext js","text":"Ext js"},
           {"value":"CSS3","text":"CSS3"},
           {"value":"HTML5","text":"HTML5"}
           ]   
            });
            $("#d3").createList();   
               })