编辑微信自定义菜单页面

演示效果
不多说，直接代码。
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8" />
  5     <title>微信自定义菜单</title>
  6     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7 </head>
  8 <body>
  9 <style>
 10     td {padding:5px;}
 11     button {padding:5px;}
 12     .btnAddLv1Menu, .btnAddLv2Menu{width:100px;}
 13     input,select {padding:5px; width:100px;}
 14     .lv1Menu{border-color:blue;}
 15 </style>
 16 
 17 <div class="tableform">
 18     <form id='menuForm' action="http://www.baidu.com" method="post">
 19         <div class="tableform">
 20             <table width="100%" border="1" cellspacing="0" cellpadding="0" style="border:1px solid #ccc">
 21                 <tr>
 22                     <td width="12%"><button type="button" class="btnAddLv1Menu">添加一级菜单</button></td>
 23                     <td width="20%">菜单名称</td>
 24                     <td width="20%">菜单类型</td>
 25                     <td width="20%">菜单值</td>
 26                 </tr>
 27                 <!-- 数据显示区域 -->
 28             </table>
 29         </div>
 30         <div class="table-action">
 31             <button>保存</button>
 32         </div>
 33     </form>
 34 </div>
 35 <!-- 一级菜单模板 -->
 36 <table id="lv1Menu_tpl" style="display: none">
 37     <tr class="lv1Menu">
 38         <td>
 39             <button type="button" class="btnAddLv2Menu">添加二级菜单</button>
 40             <button type="button" class="btnRemoveMenu">删除</button>
 41         </td>
 42         <td>
 43             <input type='text' name='name' class="x-input" >
 44         </td>
 45         <td>
 46             <select name="type" class="x-input">
 47                 <option value="">一级菜单</option>
 48                 <option value="click">Key</option>
 49                 <option value="view">链接</option>
 50             </select>
 51         </td>
 52         <td>
 53             <input type='text' name='key' class="x-input hide" >
 54         </td>
 55     </tr>
 56 </table>
 57 <!-- 二级菜单模板 -->
 58 <table id="lv2Menu_tpl" style="display: none">
 59     <tr class="lv2Menu">
 60         <td>
 61             <button type="button" class="btnRemoveMenu" style="margin-left: 108px;">删除</button>
 62         </td>
 63         <td>
 64             —— <input type='text' name='name' class="x-input">
 65         </td>
 66         <td>
 67             <select name="type" class="x-input">
 68                 <option value="click" seleted>Key</option>
 69                 <option value="view">链接</option>
 70             </select>
 71         </td>
 72         <td>
 73             <input type='text' name='key' class="x-input" >
 74         </td>
 75     </tr>
 76 </table>
 77 <script>
 78     var menus = [
 79         {
 80             'name' : '必看福利',
 81             'sub_button' : [
 82                 {'name':'每日签到', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=qiandao'},
 83                 {'name':'超级拼团', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=pintuan'},
 84                 {'name':'下载领红包', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=download'},
 85             ],
 86         },
 87         {
 88             'name' : '爱理巴巴',
 89             'type' : 'view',
 90             'url'  : 'http://www.bbc.cn/dispather.html?act=site',
 91         },
 92         {
 93             'name' : '我的服务',
 94             'sub_button' : [
 95                 {'name':'在线客服', 'type':'click', 'key':'kefu'},
 96                 {'name':'我的返利', 'type':'click', 'key':'fanli'},
 97                 {'name':'商务合作', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=hezuo'},
 98             ],
 99         },
100     ];
101     render(menus);
102     $(function(){
103         //添加一级菜单
104         $("#menuForm").on("click", ".btnAddLv1Menu", function(){
105             if(menus.length >= 3){
106                 alert("最多只能添加3个一级菜单");
107                 return;
108             }
109             //数据变化
110             var menu = {'name':'', 'sub_button':[]};
111             menus.push(menu);
112             //样式变化
113             render(menus);
114         });
115         //添加二级菜单
116         $("#menuForm").on("click", ".btnAddLv2Menu", function(){
117             var lv1Menu = $(this).parents(".lv1Menu");
118             var lv2Menus = lv1Menu.nextUntil(".lv1Menu");
119             if(lv2Menus.length >= 5){
120                 alert("最多只能添加5个二级菜单");
121                 return;
122             }
123             //数据变化
124             var lv1MenuIndex = $("#menuForm .lv1Menu").index(lv1Menu);
125             var menu = {'name':'', 'type':'key', 'key':''};
126             menus[lv1MenuIndex]['sub_button'].push(menu);
127             
128             //样式
129             render(menus);
130         });
131         //删除菜单
132         $("#menuForm").on("click", ".btnRemoveMenu", function(){
133             var tr = $(this).parents("tr");
134             if(tr.hasClass("lv1Menu")){
135                 var lv1MenuIndex = $("#menuForm .lv1Menu").index(tr);
136                 menus.splice(lv1MenuIndex, 1);
137             }else if(tr.hasClass("lv2Menu")){
138                 var lv1MenuIndex = tr.prevAll(".lv1Menu").length -1;
139                 var lv2MenuIndex = tr.prevUntil(".lv1Menu").length;
140                 menus[lv1MenuIndex]['sub_button'].splice(lv2MenuIndex, 1);
141             }
142             render(menus);
143         });
144         //失去焦点
145         $("#menuForm").on("blur", "input", function(){
146             var name = $(this).attr('name');
147             var tr = $(this).parents("tr");
148             if(tr.hasClass("lv1Menu")){
149                 var lv1MenuIndex = $("#menuForm .lv1Menu").index(tr);
150                 menus[lv1MenuIndex][name] = $(this).val();
151             }else if(tr.hasClass("lv2Menu")){
152                 var lv1MenuIndex = tr.prevAll(".lv1Menu").length -1;
153                 var lv2MenuIndex = tr.prevUntil(".lv1Menu").length;
154                 menus[lv1MenuIndex]['sub_button'][lv2MenuIndex][name] = $(this).val();
155             }
156         });
157         //下拉列表
158         $("#menuForm").on("change", "select", function(){
159             var tr = $(this).parents("tr");
160             var name = $(this).attr('name');
161             var value = $(this).val();
162             if(tr.hasClass("lv1Menu")){
163                 var lv1MenuIndex = $("#menuForm .lv1Menu").index(tr);
164                 if(value){
165                     menus[lv1MenuIndex][name] = value;
166                     if(value == 'click'){
167                         menus[lv1MenuIndex]['key'] = '';
168                     }else if(value == 'view'){
169                         menus[lv1MenuIndex]['url'] = '';
170                     }
171                     delete menus[lv1MenuIndex]['sub_button'];
172                 }else{
173                     delete menus[lv1MenuIndex]['key'];
174                     delete menus[lv1MenuIndex]['url'];
175                     delete menus[lv1MenuIndex]['type'];
176                     menus[lv1MenuIndex]['sub_button'] = new Array();
177                 }
178             }else if(tr.hasClass("lv2Menu")){
179                 var lv1MenuIndex = tr.prevAll(".lv1Menu").length -1;
180                 var lv2MenuIndex = tr.prevUntil(".lv1Menu").length;
181                 menus[lv1MenuIndex]['sub_button'][lv2MenuIndex][name] = $(this).val();
182             }
183             render(menus);
184         });
185         $("#menuForm").on("submit", function(){
186             console.log(menus);
187             return false;
188         });
189     });
190     
191     
192     //tr渲染
193     function trRender(parentEle, menu, prevEle){
194         if(!parentEle){
195             if(!prevEle){
196                 parentEle = $("#lv1Menu_tpl .lv1Menu").clone(true);
197                 var tbody = $("#menuForm table tbody");
198                 tbody.append(parentEle);
199             }else {
200                 parentEle = $("#lv2Menu_tpl .lv2Menu").clone(true);
201                 prevEle.after(parentEle);
202             }
203         }
204         parentEle = $(parentEle);
205         parentEle.find("input[name='name']").val(menu['name']);
206         if(menu['type']){
207             parentEle.find(".btnAddLv2Menu").hide();
208             parentEle.find(".btnRemoveMenu").css('margin-left', '108px');
209             parentEle.find("select[name='type']").val(menu['type']);
210         }else{
211             parentEle.find(".btnRemoveMenu").css('margin-left', '0');
212             parentEle.find(".btnAddLv2Menu").show();
213         }
214         if(menu['key'] != undefined){
215             parentEle.find("input[name='url']").attr('name', 'key');
216             parentEle.find("input[name='key']").val(menu['key']).show();
217         }else if(menu['url'] != undefined){
218             parentEle.find("input[name='key']").attr('name', 'url');
219             parentEle.find("input[name='url']").val(menu['url']).show();
220         }else{
221             parentEle.find("input[name='key']").hide();
222             parentEle.find("input[name='url']").hide();
223         }
224         return parentEle;
225     }
226     //菜单渲染
227     function render(menus){
228         var parentEle = $("#menuForm");
229         var lv1Menus = parentEle.find(".lv1Menu");
230         for(var i=0; i<menus.length; i++){
231             var lv1Menu = trRender(lv1Menus[i], menus[i], null);
232             if(menus[i]['sub_button'] && menus[i]['sub_button'].length > 0){
233                 var sub_menus = menus[i]['sub_button'];
234                 for(var j=0; j<sub_menus.length; j++){
235                     var lv2Menus = lv1Menu.nextUntil(".lv1Menu");
236                     trRender(lv2Menus[j], sub_menus[j], lv2Menus.length>0?lv2Menus.last():lv1Menu);
237                 }
238                 //tr行数大于记录数时
239                 if(lv2Menus.length > menus[i]['sub_button'].length){
240                     for(var j=menus[i]['sub_button'].length; j<lv2Menus.length; j++){
241                         lv2Menus[j].remove();
242                     }
243                 }
244                 
245             }else{
246                 lv1Menu.nextAll(".lv2Menu").remove();
247             }
248         }
249         
250         //tr行数大于记录数时
251         lv1Menus = parentEle.find(".lv1Menu");
252         if(lv1Menus.length > menus.length){
253             for(var i=menus.length; i<lv1Menus.length; i++){
254                 var lv2Menus = $(lv1Menus[i]).nextUntil(".lv1Menu");
255                 lv2Menus.remove();
256                 $(lv1Menus[i]).remove();
257             }
258         }
259     }
260 </script>
261 </body>
262 </html>
posted @ 2017-02-06 15:48 刘一二阅读(650) 评论(0) 编辑收藏举报
刷新页面返回顶部
登录后才能查看或发表评论，立即登录或者逛逛博客园首页
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律
编辑微信自定义菜单页面

最新随笔

随笔分类 (159)

随笔档案 (155)
