第一步: 添加引用文件
- <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
总结
来源: https://www.jb51.net/article/150650.htm