我的第一个jquery插件：下拉多选框 

  1 <!DOCTYPE HTML>
  2 <html>
  3  <head>
  4   <title> New Document </title>
  5   <meta name="Generator" content="EditPlus">
  6   <meta name="Author" content="">
  7   <meta name="Keywords" content="">
  8   <meta name="Description" content="">
  9     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 10     <script type="text/javascript">
 11     <!--
 12         (function ($) {
 13             $.fn.zMultiSelect = function (zSetting, zData) {
 14                 //默认设置
 15                 var defaultVal = {
 16                     json : true,//是否通过json对象导入选项
 17                     hasHidden : false,//是否需要隐藏域
 18                     hiddenName : "",//隐藏域的name的值
 19                     hasAllChecked : true,//是否需要添加全选选项
 20                     textSeparator : ";",//文本框中的连接符
 21                     valueSeparator : ";"//隐藏域中的连接符
 22                 };
 23                 //将用户设置与默认设置合并
 24                 var setting = $.extend(true,{}, defaultVal, zSetting);
 25                 //遍历jquery对象，并返回该jquery对象
 26                 return this.each(function () {
 27                     var $this = $(this);//当前dom封装成jquery对象
 28                     var objId = $this.attr("id");//当前对象的id，也可用this.id来获取
 29                     var spanId = objId+"_span";//添加_span后缀做为悬浮框的id
 30                     //为当前对象绑定单击事件，先隐藏所有悬浮框，然后显示当前对象关联的悬浮框，并阻断事件继续传播
 31                     $this.bind('click',function(e){
 32                         $("span[id$=_span]").hide();
 33                         $("#"+spanId).show();                        
 34                         e.stopPropagation();//阻断事件传播
 35                     });
 36                     if(setting.json){
 37                         //如果设置json为true，则按设置载入数据，对象前后添加隐藏域和悬浮框
 38                         loadJson($this,setting,zData);
 39                     }
 40                     //为当前对象关联的多选框添加单击事件
 41                     $("[class=" + objId + "]:checkbox").bind("click",function(e){
 42                         //如果为全选复选框，则相应全选，全不选，相关选项
 43                         if(this.value==""){
 44                             if(this.checked){
 45                                 $("[class=" + objId + "]:checkbox").attr("checked", true);
 46                             }else {
 47                                 $("[class=" + objId + "]:checkbox").attr("checked", false);
 48                             }
 49                         }
 50                         //将已选项的值连接起来赋值给文本框和隐藏域
 51                         onchangeCheckState($this,setting); 
 52                     });
 53                     //阻止span及其子元素的单击事件传播到document
 54                     $("#"+spanId).bind('click',function(e){
 55                         e.stopPropagation();//阻断事件传播
 56                     });
 57                     //单击document时，隐藏所有悬浮框
 58                     $(document).bind('click',function(){
 59                         $("span[id$=_span]").hide();
 60                     });
 61                 })
 62             };
 63             //添加悬浮框及隐藏域
 64             function loadJson(obj,setting,zData){
 65                 var hasHidden = setting.hasHidden;
 66                 var objId = obj.attr("id");
 67                 var spanId = objId+"_span";
 68                 //--------------------拼接悬浮框span-----------------------------------------------------------
 69                 var spanAdd = '<span id="'+spanId+'">';
 70                 if(setting.hasAllChecked){
 71                     //添加全选选项
 72                     spanAdd += '<div cellpadding="0" cellspacing="0" style="width:100%;border-style: none none solid none;border-color:gray;border-width:1px;"><input type="checkbox" id="'+objId + '_all' +'" class="'+objId+'" value=""/>';
 73                     spanAdd += '<label for="' + objId + '_all' + '">全选</label></div>';
 74                 }
 75                 for(var item in zData){
 76                     //多选框id，有隐藏域时，为文本框id+_+json对象的属性名，没有隐藏域时，为文本框id+_+json对象的属性值
 77                     var checkboxId = (hasHidden) ? (objId + '_' + item) : (objId + '_' + zData[item]);
 78                     //多选框的value，根据hasHidden设置为属性名或属性值
 79                     var checkboxValue = (hasHidden) ? item : zData[item];
 80                     //添加各选项
 81                     spanAdd += '<input type="checkbox" id="'+checkboxId+'" class="'+objId+'" value="'+checkboxValue+'"/>';
 82                     spanAdd += '<label for="'+checkboxId+'">'+zData[item]+'</label><br>';
 83                 }
 84                 spanAdd += '</span>';
 85                 //--------------------拼接span结束-----------------------------------------------------------
 86                 //添加悬浮框
 87                 obj.after($(spanAdd));
 88                 //为悬浮框添加class设置样式，并隐藏，同时添加mouseover和mouseout事件
 89                 $("#"+spanId).addClass("spanFloater").hide().hover(
 90                     function(){ $(this).show(); },
 91                     function(){ $(this).hide(); }
 92                 );
 93                 //添加隐藏域
 94                 if(hasHidden){
 95                     var hiddenId = objId+"_value";//添加_value后缀做为隐藏域的id
 96                     var hiddenAdd = '<input type="hidden" id="'+hiddenId+'" name="'+setting.hiddenName+'">';
 97                     obj.before($(hiddenAdd));
 98                 }
 99             };
100             //单击复选框事件，为文本框和隐藏域赋值
101             function onchangeCheckState(obj,setting){
102                 var objId = obj.attr("id");
103                 var hiddenId = objId+"_value";
104                 var kArr = new Array();
105                 var vArr = new Array();
106                 //获取已选项的值，赋值给数组
107                 $("input[class=" + objId + "][value!='']:checked").each(function (index) {
108                     kArr[index] = this.value;
109                     vArr[index] = $(this).next().text();
110                 });
111                 //串联数组，赋值给文本框和隐藏域
112                 if(setting.hasHidden){
113                     $("#"+hiddenId).val(kArr.join(setting.valueSeparator));
114                 }
115                 obj.val(vArr.join(setting.textSeparator));
116             }
117         })(jQuery);
118         $(document).ready(function () {
119             var setting = {json:true,hasHidden:true,hiddenName:"dict_dim_Level",textSeparator:",",valueSeparator:"-"}
120             var data = {nanjing:"南京",shanghai:"上海",yangzhou:"扬州",suzhou:"苏州",wuxi:"无锡",changzhou:"常州",yancheng:"盐城",xuzhou:"徐州",taizhou:"泰州",huaian:"淮安"};
121             $("input").zMultiSelect(setting,data).attr("readonly","readonly");
122         });
123     //-->
124     </script>
125     <style type="text/css">
126         .spanFloater{display:block;width:inherit;position: absolute; z-index:10;background:#F0F6E4;border: 1px solid #617775;}
127         #dim_Level {width:150px}
128         #dim_Level+span {width:155px}
129         #dim_Level2 {width:150px}
130         #dim_Level2+span {width:155px;background:lightgreen;border: 1px solid #617775;font-family: 方正舒体;font-size:25px;}
131  </style>
132  </head>
133  <body>
134      <table>
135          <tr>
136             <td>已覆盖城市：</td>
137             <td><div><input type="text" id="dim_Level"></div></td>
138             <td>欲拓展城市：</td>
139             <td><div><input type="text" id="dim_Level2"></div></td>
140          </tr>
141      </table>
142  </body>
143 </html>

第一次写jquery插件，有很多粗陋的地方，希望路过的朋友能够指点一二

注：easy ui 中已经有了这样的下拉多选框

posted on 2013-11-20 01:12  guodefu909  阅读(565)  评论(0)  编辑  收藏  举报

导航