js 实现微信可视化菜单json生成工具

<meta charset="UTF-8">
<style type="text/css">
.c2menus{margin-left:80px;}
.MENUBODY .c1menus:first-child .delc1menu-item{display: none;}
.c2menus-item{height: 35px;}
.MENUJSONFRM{white-space: pre-wrap;word-wrap: break-word;}
input[type=button]{font-weight: bold;}
</style>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- ---------------------- -->

<div class="MENUBODY">
<input type="button" class="add1 btn btn-primary btn-sm" onclick="WMENU.addmenu(this,1)" value="+" >
</div>
<input type="button" class="btn btn-success " onclick="WMENU.createmenujson();" value="CREATE MENU JSON" />
<input type="button" class="btn btn-success " onclick="WMENU.showmenujson(yjson);" value="LOAD MENU JSON" />

<div class="MENUJSONFRM"></div>

<!-- ---------------------- -->

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./template.min.js"></script>

<script id="menu1" type="text/html">
<div class="c1menus">
<div>
<input class="btn btn-danger delc1menu-item btn-sm" type="button" onclick="WMENU.delmenu(this,1)" value="-" >
一级菜单
</div>
<div class="c1info">
<span>菜单类型:</span>
<select class="type" onchange="WMENU.changeselect(this,1)">
<option {{if !type}}selected{{/if}} value="1">弹出</option>
<option {{if type=='view'}}selected{{/if}} value="view">连接</option>
<option {{if type=='click'}}selected{{/if}} value="click">标示</option>
</select>
<span>名称:</span>
<input class="name" value="{{name}}">
<span>标示:</span>
<input class="key" value="{{key}}" {{if !key}}disabled{{/if}}>
<span>链接:</span>
<input class="url" value="{{url}}" {{if !url}}disabled{{/if}}>
</div>
<div>
<div class="c2menus">
{{if !type}}
{{include 'in_menu2'}}
{{/if}}
<input type="button" class="btn btn-info btn-sm" onclick="WMENU.addmenu(this,2)" value="+" 新增二级菜单>
</div>
</div>
</div>
</script>
<script id="in_menu2" type="text/html">
{{each sub_button}}
<div class="c2menus-item">
<input type="button" class="btn btn-danger btn-sm" onclick="WMENU.delmenu(this,2)" value="-"删除一级菜单>
<span>菜单类型:</span>
<select class="type" onchange="WMENU.changeselect(this,2)">
<option {{if $value.type=='view'}}selected{{/if}} value="view">连接</option>
<option {{if $value.type=='click'}}selected{{/if}} value="click">标示</option>
</select>
<span>名称:</span>
<input class="name" value="{{$value.name}}" >
<span>标示:</span>
<input class="key"  value="{{$value.key}}" {{if !$value.key}}disabled{{/if}}>
<span>链接:</span>
<input class="url"  value="{{$value.url}}" {{if !$value.url}}disabled{{/if}}>
</div>
{{/each}}
</script>
<script id="menu2" type="text/html">
<div class="c2menus-item">
<input type="button" class="btn btn-danger btn-sm" onclick="WMENU.delmenu(this,2)" value="-"删除一级菜单>
<span>菜单类型:</span>
<select class="type" onchange="WMENU.changeselect(this,2)">
<option  value="view">连接</option>
<option  value="click">标示</option>
</select>
<span>名称:</span>
<input class="name" >
<span>标示:</span>
<input class="key" disabled>
<span>链接:</span>
<input class="url" >
</div>
</script>

<script>
var yjson = {
"menu": {
"button": [
{
"type": "click",
"name": "今日歌曲",
"key": "V1001_TODAY_MUSIC",
"sub_button": [ ]
},
{
"type": "click",
"name": "歌手简介",
"key": "V1001_TODAY_SINGER",
"sub_button": [ ]
},
{
"name": "菜单",
"sub_button": [
{
"type": "view",
"name": "搜索",
"url": "http://www.soso.com/",
"sub_button": [ ]
},
{
"type": "view",
"name": "视频",
"url": "http://v.qq.com/",
"sub_button": [ ]
},
{
"type": "click",
"name": "赞一下我们",
"key": "V1001_GOOD",
"sub_button": [ ]
}
]
}
]
}
};

var WMENU={
addmenu:function(a,t){
if(t==1){
if($(".c1menus").length<=2){
$(a).before(template("menu1", {}));
}else{
alert("一级菜单最多只能有3个");
}
}else{
if($(a).parent().find(".c2menus-item").length<=4){
if($(a).parent().parent().parent().find('.type').val()==1){
$(a).before(template("menu2", {}));
}else{
alert("一级菜单必须选择“弹出”类型才能添加二级菜单");
}
}else{
alert("一级菜单最多只能有5个");
}
}
},
delmenu:function(a,t){
if(t==1){
$(a).parent().parent().remove();
}else{
$(a).parent().remove();
}
},
changeselect:function(a,t){
$(a).parent().find(".url").val('').attr("disabled",false);
$(a).parent().find(".key").val('').attr("disabled",false);
if($(a).val()=="click"){
if(t==1) $(a).parent().parent().find(".c2menus-item").remove();
$(a).parent().find(".url").val('').attr("disabled","disabled");
}else if($(a).val()=="view"){
if(t==1) $(a).parent().parent().find(".c2menus-item").remove();
$(a).parent().find(".key").val('').attr("disabled","disabled");
}else{
$(a).parent().find(".url").val('').attr("disabled","disabled");
$(a).parent().find(".key").val('').attr("disabled","disabled");
}
},
createmenujson:function(){
var menujson = {"menu":{"button":{}}};
var menui = 0;
$('.MENUBODY .c1menus').each(function(){
var c1 = $(this).find(".c1info");
var json = {"sub_button":[]};
if(c1.find('.type').val()!=1)  json.type = c1.find('.type').val();
if(c1.find('.name').val())  json.name = c1.find('.name').val();
if(c1.find('.key').val())  json.key = c1.find('.key').val();
if(c1.find('.url').val())  json.url = c1.find('.url').val();
if(json.type==undefined){
console.log($(this).get(0));
$(this).parent().parent().parent().find(".c2menus-item").each(function(){
var cjson={"sub_button":[]};
if($(this).find('.type').val())  cjson.type = $(this).find('.type').val();
if($(this).find('.name').val())  cjson.name = $(this).find('.name').val();
if($(this).find('.key').val())  cjson.key = $(this).find('.key').val();
if($(this).find('.url').val())  cjson.url = $(this).find('.url').val();

json.sub_button.push(cjson);
});
}
menujson.menu.button[menui]=json;
menui++;
});
console.log(menujson);
$(".MENUJSONFRM").html(JSON.stringify(menujson, null, 4));
},
showmenujson:function(json){
var jmb = json.menu.button;
$('.MENUBODY').html('');
for(var i in jmb){
$('.MENUBODY').append(template("menu1", jmb[i] ));
}
var addbtn = '<input type="button" class="add1 btn btn-primary btn-sm" onclick="WMENU.addmenu(this,1)" value="+" 增加一级菜单>';
$('.MENUBODY').html($('.MENUBODY').html()+addbtn);
}
}
</script>