数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

asp.net 仿微信端菜单设置实例代码详解

来源:脚本之家  责任编辑:小易  

第一步:添加引用文件

<link rel="stylesheet" href="~/assets/css/bootstrap.min.css" rel="external nofollow" >
 <link rel="stylesheet" href="~/assets/css/font-awesome.min.css" rel="external nofollow" >
 <!-- 自定义样式 -->
 <link rel="stylesheet" href="~/assets/css/wx-custom.css" rel="external nofollow" >

 <script src="~/assets/js/bootstrap.min.js"></script>
 <!-- 自定义菜单排序 -->
 <script src="~/assets/js/Sortable.js"></script>
 <script src="~/assets/js/menu.js"></script>

第二步:编写静态页面

<input style="display:none" id="jsondata"/>
 <div class="container">
 <!-- 自定义菜单 -->
 <h3>自定义菜单</h3>
 <div class="custom-menu-edit-con">
 <div class="hbox">
 <div class="inner-left">
 <div class="custom-menu-view-con">
 <div class="custom-menu-view">
 <div class="custom-menu-view__title">HIT香茶</div>
 <div class="custom-menu-view__body">
 <div class="weixin-msg-list"><ul class="msg-con"></ul></div>
 </div>
 <div id="menuMain" class="custom-menu-view__footer">
 <div class="custom-menu-view__footer__left"></div>
 <div class="custom-menu-view__footer__right"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="inner-right">
 <div class="cm-edit-after">
 <div class="cm-edit-right-header b-b"><span id="cm-tit"></span> <a id="delMenu" class="pull-right" href="javascript:;" rel="external nofollow" >删除菜单</a></div>
 <form class="form-horizontal wrapper-md" name="custom_form">
 <div class="form-group">
 <label class="col-sm-2 control-label">菜单名称:</label><div class="col-sm-5">
 <input name="custom_input_title" type="text" class="form-control" ng-model="menuname" value="" placeholder="" ng-maxlength="5">
 </div><div class="col-sm-5 help-block">
 <div ng-show="custom_form.custom_input_title.$dirty&&custom_form.custom_input_title.$invalid-maxlength">字数不超过5个汉字或16个字符</div>
 <div class="font_sml" style="display: none;">若无二级菜单,可输入20个汉字或60个字符</div>
 </div>
 </div>
 <div class="form-group" id="radioGroup">
 <label class="col-sm-2 control-label">菜单内容:</label>
 <div class="col-sm-10 LebelRadio">
 <label class="checkbox-inline"><input type="radio" name="radioBtn" value="sendmsg" checked> 发送消息</label>
 <label class="checkbox-inline"><input type="radio" name="radioBtn" value="link" > 跳转网页</label>
 </div>
 </div>
 </form>

<div class="cm-edit-content-con" id="editMsg">
 <div class="editTab">
 <div class="editTab-heading">
 <ul class="msg-panel__tab">
 <li class="msg-tab_item on">
 <span class="msg-icon msg-icon-tuwen"></span>
图文消息
</li>
 </ul>
 </div>
 <div class="editTab-body">
 <div class="msg-panel__context">
 <div class="msg-context__item">
 <div class="msg-panel__center msg-panel_select" data-toggle="modal" data-target="#selectModal"><span class="message-plus">+</span><br>从素材库中选择</div>
 </div>
 <div class="msg-template"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="cm-edit-content-con" id="editPage">
 <div class="cm-edit-page">
 <div class="row">
 <label class="col-sm-6 control-label" style="text-align: left;">
粉丝点击该菜单会跳转到以下链接:
 </label>
 </div>
 <div class="row">
 <label class="col-sm-2 control-label" style="text-align: left;">
页面地址:
 </label>
 <div class="col-sm-5">
 <input type="text" name="url" class="form-control" placeholder="认证号才可手动输入地址">
 <span class="help-block">必填,必须是正确的URL格式</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="cm-edit-before"><h5>点击左侧菜单进行操作</h5></div>
 </div>
 </div>
 </div>
 <div class="cm-edit-footer">
 <button id="sortBtn" type="button" class="btn btn-default">菜单排序</button>
 <button id="sortBtnc" type="button" class="btn btn-default">完成排序</button>
 <button id="saveBtns" type="button" class="btn btn-info1">保存</button>
 </div>
 </div>

 

<div id="selectModal" class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
 <h4 class="modal-title">
选择图片
</h4>
 </div>
 <div class="modal-body">
 <div class="row">
 <div id="col_1" class="col-xs-4">
 <div class="panel panel-default">
 <div class="panel-heading msg-date">
 08月12日
</div>
 <div class="panel-body">
 <h5 class="msg-title">微信缴费使用指南1</h5>
 <div class="msg-img"><img src="~/assets/images/20170831595cf16beb634972a65adb6b14abca9b.jpg" alt=""></div>
 <p class="msg-text">微信缴费使用指南</p>
 </div>
 <div class="mask-bg"><div class="mask-icon"><i class="icon-ok"></i></div></div>
 </div>
 </div>
 <div id="col_2" class="col-xs-4">
 <div class="panel panel-default">
 <div class="panel-heading msg-date">
 08月31日
</div>
 <div class="panel-body">
 <h5 class="msg-title">微信缴费使用指南2</h5>
 <div class="msg-img"><img src="~/assets/images/1.png" alt=""></div>
 <p class="msg-text">微信缴费使用指南</p>
 </div>
 <div class="mask-bg"><div class="mask-icon"><i class="icon-ok"></i></div></div>
 </div>
 </div>
 </div>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-info ensure">确定</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 </div>
 </div>
 </div>
 </div>
 <div id="reminderModal" class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
 <h4 class="modal-title">
温馨提示
</h4>
 </div>
 <div class="modal-body">
 <h5>添加子菜单后,一级菜单的内容将被清除。确定添加子菜单?</h5>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-info reminder">确定</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 </div>
 </div>
 </div>
 </div>

<div id="abnormalModal" class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
 <h4 class="modal-title">
温馨提示
</h4>
 </div>
 <div class="modal-body">
 <h5>数据异常</h5>
 </div>
 <div class="modal-footer">
 <!-- <button type="button" class="btn btn-info reminder">确定</button> -->
 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 </div>
 </div>
 </div>
 </div>

第三步:调用js文件

<script>
 $(function myfunction() {
 $('#editPage').show();
 });
</script>

文件下载地址:http://xiazai.jb51.net/201811/yuanma/5ba1e81947355.rar

总结

以上所述是小编给大家介绍的asp.net 仿微信端菜单设置实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:


  • 本文相关:
  • 使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)
  • asp.net微信公众号添加菜单
  • asp.net mvc5+ef6+easyui后台管理系统 微信公众平台开发之消息管理
  • asp.net core集成微信登录
  • asp.net实现qq、微信、新浪微博oauth2.0授权登录
  • asp.net实现微信公众账号接口开发教程
  • asp.net微信开发(接口指南)
  • asp.net微信开发(永久素材管理)
  • asp.net微信开发(高级群发图文)
  • asp.net 提高网站速度及如何利用缓存
  • asp.net使用httpmodule压缩并删除空白html请求的实现代码
  • asp.net关于onpropertychange和oninput事件实现代码
  • 微软ajax库的使用方法(ajax.ajaxmethod)
  • 在ashx文件中使用session的解决思路
  • visual studio实现xml文件使用app.config、web.config等的智能提
  • asp.ent下合并两个结构相同的datatable
  • 对listbox的添加移除操作实例分享
  • asp.net post方式获取数据流的一种简单写法
  • gridview用法大总结(全程图解珍藏版)
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved