实现微信公众号平台菜单功能
样式是拷贝微信的的。。。。
然后 js 是自己写的 有点乱
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/category/tooltip218878.css" rel="stylesheet" />
<link href="~/Content/category/upload331295.css" rel="stylesheet" />
<link href="~/Content/category/wx1.css" rel="stylesheet" />
<link href="~/Content/category/wx2.css" rel="stylesheet" />
<link href="~/Content/category/wx4.css" rel="stylesheet" />
<link href="~/Content/category/wx3.css" rel="stylesheet" />
<link href="~/Content/category/base391759.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
</head>
<body class="zh_CN">
<div class="head" id="header">
<script type="text/javascript">
$(function(){
//彩电添加
var js_addMenuTips=$("#js_addMenuTips");
var mobile_bd=$(".mobile_bd");
var menuList=$("#menuList");
//添加添加子菜单
js_addMenuTips.click(function(){
menuList.hide();
$(".sort_btn_wrp").show();
$(".menu_form_area").show();
$("#save_ds").show();
mobile_bd.append("<ul class='pre_menu_list grid_line ui-sortable ui-sortable-disabled' id='menuLists'>"+
"<li class='jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled size1of2 selected current' onclick='hides_di(this);' id='menu_0'><a href='javascript:void(0);' class='pre_menu_link' draggable='false'>"+
"<i class='icon_menu_dot js_icon_menu_dot dn' style='display: none;'></i>"+
"<i class='icon20_common sort_gray'></i>"+
"<span class='js_l1Title' id='m_title'>菜单名称</span>"+"</a><div class='sub_pre_menu_box js_l2TitleBox' style=''><ul class='sub_pre_menu_list'><li class='js_addMenuBox' onclick='js_add(this,"+i+");'><a href='javascript:void(0);' class='jsSubView js_addL2Btn' title='最多添加5个子菜单' draggable='false'><span class='sub_pre_menu_inner js_sub_pre_menu_inner'><i class='icon14_menu_add'></i></span></a></li></ul><i class='arrow arrow_out'></i><i class='arrow arrow_in'></i></div><iframe id='tmp_downloadhelper_iframe' style='display: none;'></iframe></li><li class='js_addMenuBox pre_menu_item grid_item no_extra size1of2'><a href='javascript:void(0);' class='pre_menu_link js_addL1Btn' id='add_btns' "+"onclick='add_zi(this);' title='最多添加3个一级菜单' draggable='false'><i class='icon14_menu_add'></i></a></li></ul>");
});
var i=0;
// var menu=0;
add_zi=function(obj){
i++;
$("#menuLists li").removeClass("size1of2");
$("#menuLists li").addClass("size1of3");
$("#menuLists").prepend("<li class='jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled size1of3' onclick='hides_di(this);' id='menu_"+i+"'><a href='javascript:void(0);' class='pre_menu_link' draggable='false'><i class='icon_menu_dot js_icon_menu_dot dn' style='display: none;'></i><i class='icon20_common sort_gray'></i><span class='js_l1Title' id='m_title'>菜单名称</span></a><div class='sub_pre_menu_box js_l2TitleBox' style='display: none;'><ul class='sub_pre_menu_list'><li class='js_addMenuBox' onclick='js_add(this,"+i+");'><a href='javascript:void(0);' class='jsSubView js_addL2Btn' title='最多添加5个子菜单' draggable='false'><span class='sub_pre_menu_inner js_sub_pre_menu_inner'><i class='icon14_menu_add'></i></span></a></li></ul><i class='arrow arrow_out'></i><i class='arrow arrow_in'></i></div></li>");
}
hides_di=function(obj){
$(obj).find("div.sub_pre_menu_box").css("display","block");
//alert( $(obj).find("div.sub_pre_menu_box").siblings("div .sub_pre_menu_box").html());
//alert($(obj).html());
$(obj).addClass("current").siblings().removeClass("current");
//$(obj).find("div").addClass("dss");
$("#pubBts").attr("menuid",$(obj).attr("id"));
//$(obj).find(".pre_menu_link span").text($("#names").val());
}
js_add=function(obj,listi){
var c=$(obj).siblings().length;
if (c>4)
{
$(obj).hide()
}else{
$(obj).parents(".sub_pre_menu_list").prepend("<li id='menu_"+listi+"_"+c+"' class='jslevel2 selected ' onclick='add_menus(this,"+listi+","+c+");'><a href='javascript:void(0);' class='jsSubView' draggable='false'><span class='sub_pre_menu_inner js_sub_pre_menu_inner'><i class='icon20_common sort_gray'></i><span class='js_l2Title' id='m_title'>子菜单名称</span></span></a></li>");
}
}
$(document).on("click",".sub_pre_menu_list li",function(){
//alert($(this).attr("id"));
$("#pubBts").attr("menuid",$(this).attr("id"));
// $(this).find("span .js_l2Title").text($("#names").val());
})
//子菜单保存
add_menus=function(obj,index,index1){
//$(obj).addClass("current").siblings().removeClass("current");
//$("#pubBts").attr("menuid","");
// $("#pubBts").attr("menuid",$(obj).attr("id"));
// alert($(obj).attr("id"));
}
var json = "";
//保存全部
$("#pubBt").click(function(){
var arr=[];
for(var j=0;j<3;j++){
var len=$("#menu_"+j).length;
//$(this).find("span .js_l2Title").text()
if (len>0) {
json += "_"+j + ":p" + $('#menu_' + j).find(".paxss").text();
$("#menu_"+j).find(".sub_pre_menu_list li").each(function(){
json+=":{"+$(this).find(".xss").text()+"}";
})
}else{
continue;
}
}
$.ajax({
type: "post",
url: "/Category/Category",
data: { "category": json },
success: function (data) {
if (data == "0") {
alert("添加成功");
} else {
alert("添加失败");
}
}
})
})
//追加内容
$("#pubBts").click(function(){
var type=$("input[type='radio']:checked").next("span").text();
var name=$("#names").val();
var content=$("#contents").val();
var ids=$(this).attr("menuid");
var arr = [];
arr = ids.split('_');
if (arr.length >= 3) {
//子菜单
$("#" + ids).append("<div class='xss' style='display:none;'>" + type + "," + name + "," + content + "</div>");
} else {
$("#" + ids).append("<div class='paxss' style='display:none;'>" + type + "|" + name + "|" + content + "</div>");
}
//主菜单
//alert(ids);
$("#"+ids).find("#m_title").text(name);
});
})
</script>
</div>
<div id="body" class="body page_menu_index">
<!--左边效果-->
<div id="js_container_box" class="container_box cell_layout side_l">
<div class="col_main">
<div class="main_hd js_menuSetting ">
<h2>自定义菜单</h2>
</div>
<div class="main_bd">
<div class="menu_setting_box js_menuBox">
<div class="menu_setting_area js_editBox">
<div class="menu_preview_area" style="display: block;">
<div class="mobile_menu_preview">
<div class="mobile_hd tc">尘梦</div>
<div class="mobile_bd">
<ul class="pre_menu_list grid_line ui-sortable ui-sortable-disabled no_menu" id="menuList">
<li class="js_addMenuBox pre_menu_item grid_item no_extra size1of1">
<a href="javascript:void(0);" class="pre_menu_link js_addL1Btn" title="最多添加3个一级菜单" draggable="false">
<i class="icon14_menu_add"></i>
<span class="js_addMenuTips" id="js_addMenuTips">添加菜单</span>
</a>
</li>
</ul>
</div> <iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe>
</div>
<div class="sort_btn_wrp" style="display: none;">
<a id="orderBt" class="btn btn_default" href="javascript:void(0);" style="display: none;">菜单排序</a>
<span id="orderDis" class="dn btn btn_disabled" style="display: none;">菜单排序</span>
<a id="finishBt" href="javascript:void(0);" class="dn btn btn_default">完成</a>
</div>
</div>
<div class="menu_form_area" style="display: none;">
<div id="js_none" class="menu_initial_tips tips_global" style="display: none;">点击左侧菜单进行编辑操作</div>
<div id="js_rightBox" class="portable_editor to_left" style="display: block;">
<div class="editor_inner">
<div class="global_mod float_layout menu_form_hd js_second_title_bar">
<h4 class="global_info">
菜单名称
</h4>
<div class="global_extra"> <a href="javascript:void(0);" id="jsDelBt">删除菜单</a> </div> <iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe>
</div>
<div class="menu_form_bd" id="view">
<div id="js_innerNone" style="display:none;" class="msg_sender_tips tips_global"></div>
<div class="frm_control_group">
<label for="" class="frm_label"> <strong class="title js_menuContent">菜单类型</strong> </label>
<div class="frm_controls">
<input type="radio" name="types" checked="checked" value="0"><span>二维码</span>
<input type="radio" name="types" value="1"><span> 地址</span>
<p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p>
<p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
</div>
</div>
<div class="frm_control_group js_setNameBox">
<label for="" class="frm_label"> <strong class="title js_menuTitle">菜单名称</strong> </label>
<div class="frm_controls">
<span class="frm_input_box with_counter counter_in append"> <input type="text" class="frm_input js_menu_name" id="names"> </span>
<p class="frm_msg fail js_titleEorTips dn">字数超过上限</p>
<p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p>
<p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
</div>
</div>
<div class="frm_control_group">
<label for="" class="frm_label"> <strong class="title js_menuContent">菜单内容</strong> </label>
<div class="frm_controls">
<span class="frm_input_box with_counter counter_in append"> <input type="text" class="frm_input js_menu_name" id="contents"> </span>
<p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p>
<p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
</div>
</div>
<div class="menu_content_container">
<div class="menu_content send jsMain" id="edit" style="display: block;">
<div class="msg_sender" id="editDiv">
</div>
<p class="profile_link_msg_global menu_send mini_tips warn dn js_warn"> 请勿添加其他公众号的主页链接 </p>
</div>
<span id="pubBts" class="btn btn_input btn_primary" menuid='0' menuid_list='0'><button>保存</button></span>
<div id="js_errTips" style="display:none;" class="msg_sender_msg mini_tips warn"></div>
</div>
</div>
</div> <span class="editor_arrow_wrp"> <i class="editor_arrow editor_arrow_out"></i> <i class="editor_arrow editor_arrow_in"></i> </span>
</div>
</div>
</div>
<div class="tool_bar tc js_editBox" id="save_ds" style="display: none;"> <span id="pubBt" class="btn btn_input btn_primary"><button>保存并发布</button></span> <a href="javascript:void(0);" class="btn btn_default" id="viewBt">预览</a> </div>
</div>
</div>
<!--预览效果-->
<div class="mobile_preview" id="mobileDiv">
<div class="mobile_preview_hd"> <strong class="nickname">尘梦</strong> </div>
<div class="mobile_preview_bd">
<ul id="viewShow" class="show_list"> </ul>
</div>
<div class="mobile_preview_ft">
<ul class="pre_menu_list grid_line" id="viewList"></ul>
</div>
<div class="moblie_preview_weapp js_preview_weapp_wrapper" style="display: none">
<div class="weapp_hd">
<i class="icon_back_weapp js_preview_weapp_close">返回</i>
<p class="weapp_title js_preview_weapp_title"></p>
</div>
<div class="preview_extra"> 电脑端暂不支持预览小程序 </div>
</div> <a href="javascript:void(0);" class="mobile_preview_closed btn btn_default" id="viewClose">退出预览</a>
</div>
</div>
</div>
</div>
</body>
</html>
后台添加
public bool AddCategory(string category) {
List<string> list = new List<string>();
string[] arr = category.Split('_');
string[] arr1 = null;
string[] arr2 = null;
string[] arr3 = null;
string id = "";
//第一层
for (int i = 0; i < arr.Length; i++)
{
if (arr[i] == "" && arr[i] == null)
{
continue;
}
else
{
arr1 = arr[i].Split(':');
//第二层
for (int j = 1; j < arr1.Length; j++)
{
if (arr[j] == "" && arr[j] == null)
{
continue;
}
else
{
//第三层
if (arr1[j].ToString() != "{}")
{
string aname = arr1[j].Substring(0, 1);
if (aname == "p")
{
arr3 = arr1[j].Split('|');
id = DbHelperSQL.GeNewID("T_WX_Category").ToString();
string sql = "insert into T_WX_Category(id,cate_name,cate_type,cate_content,p_id)values(" + id + ",'" + arr3[1] + "','" + arr3[0] + "','" + arr3[2] + "'," + "0)";
list.Add(sql);
}
else
{
arr2 = arr1[j].Split(',');
string ids = DbHelperSQL.GeNewID("T_WX_Category").ToString();
string sql = "insert into T_WX_Category(id,cate_type,cate_name,cate_content,p_id)values(" + ids + ",'" + arr2[0] + "','" + arr2[1] + "','" + arr2[2] + "'," + id + ")";
list.Add(sql);
}
}
else {
continue;
}
}
}
}
}
//添加数据库
bool b=DbHelperSQL.ExecuteSqlTran(list)>0?true:false;
return b;
}
