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 };
时间： 2024-10-01 08:48:54