我的第一个jquery插件:下拉多选框
2013-11-20 01:12
232 查看
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> <!-- (function ($) { $.fn.zMultiSelect = function (zSetting, zData) { //默认设置 var defaultVal = { json : true,//是否通过json对象导入选项 hasHidden : false,//是否需要隐藏域 hiddenName : "",//隐藏域的name的值 hasAllChecked : true,//是否需要添加全选选项 textSeparator : ";",//文本框中的连接符 valueSeparator : ";"//隐藏域中的连接符 }; //将用户设置与默认设置合并 var setting = $.extend(true,{}, defaultVal, zSetting); //遍历jquery对象,并返回该jquery对象 return this.each(function () { var $this = $(this);//当前dom封装成jquery对象 var objId = $this.attr("id");//当前对象的id,也可用this.id来获取 var spanId = objId+"_span";//添加_span后缀做为悬浮框的id //为当前对象绑定单击事件,先隐藏所有悬浮框,然后显示当前对象关联的悬浮框,并阻断事件继续传播 $this.bind('click',function(e){ $("span[id$=_span]").hide(); $("#"+spanId).show(); e.stopPropagation();//阻断事件传播 }); if(setting.json){ //如果设置json为true,则按设置载入数据,对象前后添加隐藏域和悬浮框 loadJson($this,setting,zData); } //为当前对象关联的多选框添加单击事件 $("[class=" + objId + "]:checkbox").bind("click",function(e){ //如果为全选复选框,则相应全选,全不选,相关选项 if(this.value==""){ if(this.checked){ $("[class=" + objId + "]:checkbox").attr("checked", true); }else { $("[class=" + objId + "]:checkbox").attr("checked", false); } } //将已选项的值连接起来赋值给文本框和隐藏域 onchangeCheckState($this,setting); }); //阻止span及其子元素的单击事件传播到document $("#"+spanId).bind('click',function(e){ e.stopPropagation();//阻断事件传播 }); //单击document时,隐藏所有悬浮框 $(document).bind('click',function(){ $("span[id$=_span]").hide(); }); }) }; //添加悬浮框及隐藏域 function loadJson(obj,setting,zData){ var hasHidden = setting.hasHidden; var objId = obj.attr("id"); var spanId = objId+"_span"; //--------------------拼接悬浮框span----------------------------------------------------------- var spanAdd = '<span id="'+spanId+'">'; if(setting.hasAllChecked){ //添加全选选项 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=""/>'; spanAdd += '<label for="' + objId + '_all' + '">全选</label></div>'; } for(var item in zData){ //多选框id,有隐藏域时,为文本框id+_+json对象的属性名,没有隐藏域时,为文本框id+_+json对象的属性值 var checkboxId = (hasHidden) ? (objId + '_' + item) : (objId + '_' + zData[item]); //多选框的value,根据hasHidden设置为属性名或属性值 var checkboxValue = (hasHidden) ? item : zData[item]; //添加各选项 spanAdd += '<input type="checkbox" id="'+checkboxId+'" class="'+objId+'" value="'+checkboxValue+'"/>'; spanAdd += '<label for="'+checkboxId+'">'+zData[item]+'</label><br>'; } spanAdd += '</span>'; //--------------------拼接span结束----------------------------------------------------------- //添加悬浮框 obj.after($(spanAdd)); //为悬浮框添加class设置样式,并隐藏,同时添加mouseover和mouseout事件 $("#"+spanId).addClass("spanFloater").hide().hover( function(){ $(this).show(); }, function(){ $(this).hide(); } ); //添加隐藏域 if(hasHidden){ var hiddenId = objId+"_value";//添加_value后缀做为隐藏域的id var hiddenAdd = '<input type="hidden" id="'+hiddenId+'" name="'+setting.hiddenName+'">'; obj.before($(hiddenAdd)); } }; //单击复选框事件,为文本框和隐藏域赋值 function onchangeCheckState(obj,setting){ var objId = obj.attr("id"); var hiddenId = objId+"_value"; var kArr = new Array(); var vArr = new Array(); //获取已选项的值,赋值给数组 $("input[class=" + objId + "][value!='']:checked").each(function (index) { kArr[index] = this.value; vArr[index] = $(this).next().text(); }); //串联数组,赋值给文本框和隐藏域 if(setting.hasHidden){ $("#"+hiddenId).val(kArr.join(setting.valueSeparator)); } obj.val(vArr.join(setting.textSeparator)); } })(jQuery); $(document).ready(function () { var setting = {json:true,hasHidden:true,hiddenName:"dict_dim_Level",textSeparator:",",valueSeparator:"-"} var data = {nanjing:"南京",shanghai:"上海",yangzhou:"扬州",suzhou:"苏州",wuxi:"无锡",changzhou:"常州",yancheng:"盐城",xuzhou:"徐州",taizhou:"泰州",huaian:"淮安"}; $("input").zMultiSelect(setting,data).attr("readonly","readonly"); }); //--> </script> <style type="text/css"> .spanFloater{display:block;width:inherit;position: absolute; z-index:10;background:#F0F6E4;border: 1px solid #617775;} #dim_Level {width:150px} #dim_Level+span {width:155px} #dim_Level2 {width:150px} #dim_Level2+span {width:155px;background:lightgreen;border: 1px solid #617775;font-family: 方正舒体;font-size:25px;} </style> </head> <body> <table> <tr> <td>已覆盖城市:</td> <td><div><input type="text" id="dim_Level"></div></td> <td>欲拓展城市:</td> <td><div><input type="text" id="dim_Level2"></div></td> </tr> </table> </body> </html>
第一次写jquery插件,有很多粗陋的地方,希望路过的朋友能够指点一二
注:easy ui 中已经有了这样的下拉多选框
相关文章推荐
- jQuery对下拉框,单选框,多选框的操作
- JQuery下拉框插件(selectbox),支持多选和单选
- jQuery powerFloat万能浮动层下拉层插件
- jquery插件编写:文本框实现下拉框效果
- Jquery Chained Selects Plugin 多级联动下拉框插件
- jQuery实现输入框下拉列表树插件特效代码分享
- jQuery下拉列表二级联动插件
- JQuery向导插件Step——第一个阉割版插件
- 基于jquery 无限极分类下拉列表选择插件
- 【jquery插件】SELECT美化,下拉框美化
- 发布自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- 完成了自己第一个jQuery的插件NumberText 1.0
- 在使用jquery的chosen下拉列表的插件时,碰到了使用jquery.validate.js的冲突
- jQuery下拉列表插件 jQselectable
- jQuery插件 - 下拉列表日期选择控件
- jQuery扁平化风格下拉框美化插件FancySelect使用指南
- 【jquery插件】SELECT美化,下拉框美化
- 【转】jQuery下拉框,单选框,多选框整理
- 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]
- jQuery学习之:jqGrid表格插件——第一个Demo