自从上次做了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 solid #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           {
             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);
          }
          // 当获取到焦点使出现该下拉框
          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();   
               })