实用的 jquery 小插件
浏览数：18 /
时间：2015年06月09日
1 /** 2 * ---------------------------------------------------- 3 * 实用的 jquery 插件方法 4 * @QQ 617937424 5 * @寄语 不要重复写同样的代码，学会封装成方法，慢慢积累，提高效率。 6 * ---------------------------------------------------- 7 */ 8 9 10 /** 11 * 全选/反选 12 * 13 * html结构： 14 <div id="checkboxParent"> 15 <input type="checkbox" /> 16 <input type="checkbox" /> 17 </div> 18 <label><input type="checkbox" id="checkAll" />全选</label> 19 <label><input type="checkbox" id="checkRev" />反选</label> 20 * 调用：$(‘#checkAll‘).checkAll(‘#checkboxParent‘, ‘#checkRev‘); 21 * 参数说明: $(控制全选的checkbox).checkAll(被操控的checkbox父级, [控制反选的checkbox]); 22 */ 23 $.fn.checkAll = function(checkbox, rev){ 24 return this.each(function(){ 25 var $this = $(this); 26 $this.click(function(){ 27 if(this.checked){ 28 $(checkbox).find(":checkbox").prop("checked", true); 29 if(rev) $(rev).prop("checked", false); 30 }else{ 31 $(checkbox).find(":checkbox").prop("checked", false); 32 } 33 }); 34 //如果有反选 35 if(rev){ 36 $(rev).click(function(){ 37 $(checkbox+‘>:checkbox‘).each(function(){ 38 this.checked = !this.checked; 39 }); 40 if(this.checked){ 41 $this.prop("checked", false); 42 } 43 }); 44 45 } 46 47 }); 48 } 49 50 /** 51 * 弹出bootstrap模态窗 52 * 53 * html结构： 54 <div id="loginBox" style="display:none"> 55 用户名:<input type="text" name="usrname" /><br/> 56 密码:<input type="password" name="password" /> 57 </div> 58 * 调用: $(‘#loginBox‘).showModal({action: ‘login.php‘, title: ‘用户登录‘}); 59 * 参数说明: $(弹窗内容的父级).showModal({action: 提交url, title: 窗口标题, [footer: 弹窗页脚html] }, [bootstrap模态窗参数]); 60 */ 61 $.fn.showModal = function(data, options){ 62 var $this = $(this); 63 var modalId = $this.attr("id") + ‘AutoModal‘; 64 if($this.attr(‘data-lock‘) != 1){ 65 var modalHtml = ‘<div class="modal fade" id="‘+ modalId +‘" role="dialog"> 66 <div class="modal-dialog"> 67 <div class="modal-content"> 68 <div class="modal-header"> 69 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 70 <h4 class="modal-title">title</h4> 71 </div> 72 <form class="form-horizontal" method="post"> 73 <div class="modal-body">body</div> 74 <div class="modal-footer" style="margin-top:0"> 75 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 76 <button type="submit" data-loading-text="处理中..." class="btn btn-primary">确定</button> 77 </div> 78 </form> 79 </div> 80 </div> 81 </div>‘; 82 var content = $this.children(); 83 $this.html(modalHtml).find(‘.modal-body‘).html(content) 84 $this.attr(‘data-lock‘, 1); 85 } 86 $this.show(); 87 $modal = $(‘#‘+ modalId); 88 $modal.find(‘.modal-title‘).html(data.title); 89 $modal.find(‘form‘).attr("action", data.action); 90 if(typeof data.footer !== ‘undefined‘){ 91 $modal.find(‘.modal-footer‘).html(data.footer); 92 } 93 return this.each(function(){ 94 $modal.modal(options || ‘show‘); 95 }); 96 } 97 98 99 100 /** 101 * 把json数据填充到from表单中 102 * 103 * html结构: 104 <form id="editForm" action="user.php"> 105 用户名:<input type="text" name="usrname" /><br/> 106 地址:<input type="text" name="address" /><br/> 107 性别:<input type="radio" name="sex" value="0" />男 <input type="radio" name="sex" value="1" />女<br/> 108 爱好:<input type="checkbox" name="hobby[]" value="sing" />唱歌 109 <input type="checkbox" name="hobby[]" value="code" />写代码 110 <input type="checkbox" name="hobby[]" value="trance" />发呆 111 </form> 112 * 调用: $(‘#editForm‘).formEdit({ "usrname":"张三", "address":"湖北钟祥", "sex": "1", "hobby":["sing", "trance"]}); 113 * 参数说明: $(form表单).formEdit(json数据); 114 * json数据说明:基本格式{inputname: value}, 具体类型{"text":"aaa", "checkbox":[1,2,3], "radio":"10"} 115 */ 116 $.fn.formEdit = function(data){ 117 return this.each(function(){ 118 var input, name; 119 if(data == null){this.reset(); return this; } 120 for(var i = 0; i < this.length; i++){ 121 input = this.elements[i]; 122 //checkbox的name可能是name[]数组形式 123 if(input.type == "checkbox"){ 124 name = input.name.replace(/(.+)\[\]$/, "$1"); 125 }else{ 126 name = input.name; 127 } 128 if(data[name] == undefined) continue; 129 switch(input.type){ 130 case "checkbox": 131 if(data[name] == ""){ 132 input.checked = false; 133 }else{ 134 //数组查找元素 135 if(data[name].indexOf(input.value) > -1){ 136 input.checked = true; 137 }else{ 138 input.checked = false; 139 } 140 } 141 break; 142 case "radio": 143 if(data[name] == ""){ 144 input.checked = false; 145 }else if(input.value == data[name]){ 146 input.checked = true; 147 } 148 break; 149 default: input.value = data[name]; 150 } 151 } 152 }); 153 }; 154 155 156 /** 157 * get方式异步提交并处理返回数据 158 * 159 * html结构: 160 <a data-edit="id=110">编辑110</a> 161 <a data-edit="id=112">编辑112</a> 162 * 调用: $(‘[data-edit]‘).eidtRecord(‘abc.php‘, function(data){ alert(‘success‘); }, false); 163 * 参数说明: $(带有get参数值的按钮).eidtRecord(请求的url, jquery的ajax回调方法, 是否显示确认对话框); 164 */ 165 $.fn.eidtRecord = function(url, func, warn){ 166 if(typeof func != ‘function‘){ 167 func = function(data){ 168 if(data.status){location.reload();}else{alert(data.info);} 169 } 170 } 171 warn = warn || false; 172 var attr = this.selector.replace(/\[(.+)\]$/, "$1"); 173 return this.each(function(){ 174 var $this = $(this); 175 $this.click(function(){ 176 if(warn){ 177 if(!confirm(‘确认操作，今生无悔？‘)) return; 178 } 179 $.get(url, $this.attr(attr), func, ‘json‘); 180 }); 181 }); 182 183 } 184 185 186 187 /** 188 * 异步提交表单 189 * 190 * html结构: 191 * <form id="form"><input type="text" name="username" value="test" /><button type="submit">提交<button></form> 192 * 调用: $(‘#form‘).ajaxForm(function(data){ alert(‘success‘); }); 193 * 参数说明: $(表单).ajaxForm(jquery的ajax回调方法); 194 */ 195 $.fn.ajaxForm = function(func){ 196 if(typeof func != ‘function‘){ 197 func = function(data){ 198 if(data.status){location.reload(); }else{alert(data.info);} 199 } 200 } 201 return this.each(function (){ 202 var $this = $(this); 203 $this.live(‘submit‘,function(){ 204 $.post($this.attr(‘action‘), $this.serialize(), func, ‘json‘); 205 return false; 206 }); 207 }) 208 }; 209 210 211 /** 212 * 表单的action带有get参数时,又要追加表单中填写的参数时,可用此方法 213 * 214 * html结构: 215 <form id="form" action="index.php?act=test"> 216 <input type="text" name="username" value="张三" /> 217 <button type="submit">提交<button> 218 </form> 219 * 调用: $(‘#form‘).formLocation(); 220 * 参数说明: $(表单).formLocation(); 221 */ 222 $.fn.formLocation = function(){ 223 return this.each(function (){ 224 var $this = $(this); 225 $this.submit(function(){ 226 window.location = $this.attr(‘action‘) + ‘&‘ + $this.serialize(); 227 return false; 228 }); 229 }) 230 };
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
