第一步：添加引用文件
<link href="https://www.jb51.net/~/assets/css/bootstrap.min.css" > <link href="https://www.jb51.net/~/assets/css/font-awesome.min.css" > <!-- 自定义样式 --> <link href="https://www.jb51.net/~/assets/css/wx-custom.css" > <script src="https://www.jb51.net/~/assets/js/bootstrap.min.js"></script> <!-- 自定义菜单排序 --> <script src="https://www.jb51.net/~/assets/js/Sortable.js"></script> <script src="https://www.jb51.net/~/assets/js/menu.js"></script>
第二步：编写静态页面
<input/> <div> <!-- 自定义菜单 --> <h3>自定义菜单</h3> <div> <div> <div> <div> <div> <div>HIT香茶</div> <div> <div><ul></ul></div> </div> <div> <div></div> <div></div> </div> </div> </div> </div> <div> <div> <div><span></span> <a href="javascript:;" >删除菜单</a></div> <form> <div> <label>菜单名称:</label><div> <input type="text" ng-model="menuname" value="" placeholder="" ng-maxlength="5"> </div><div> <div ng-show="custom_form.custom_input_title.$dirty&&custom_form.custom_input_title.$invalid-maxlength">字数不超过5个汉字或16个字符</div> <div>若无二级菜单，可输入20个汉字或60个字符</div> </div> </div> <div> <label>菜单内容:</label> <div> <label><input type="radio" value="sendmsg" checked> 发送消息</label> <label><input type="radio" value="link" > 跳转网页</label> </div> </div> </form> <div> <div> <div> <ul> <li> <span></span> 图文消息 </li> </ul> </div> <div> <div> <div> <div data-toggle="modal" data-target="#selectModal"><span>+</span><br>从素材库中选择</div> </div> <div></div> </div> </div> </div> </div> <div> <div> <div> <label> 粉丝点击该菜单会跳转到以下链接: </label> </div> <div> <label> 页面地址: </label> <div> <input type="text" placeholder="认证号才可手动输入地址"> <span>必填,必须是正确的URL格式</span> </div> </div> </div> </div> </div> <div><h5>点击左侧菜单进行操作</h5></div> </div> </div> </div> <div> <button type="button">菜单排序</button> <button type="button">完成排序</button> <button type="button">保存</button> </div> </div> <div tabindex="-1" role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span>×</span></button> <h4> 选择图片 </h4> </div> <div> <div> <div> <div> <div> 08月12日 </div> <div> <h5>微信缴费使用指南1</h5> <div><img src="https://www.jb51.net/~/assets/images/20170831595cf16beb634972a65adb6b14abca9b.jpg" alt=""></div> <p>微信缴费使用指南</p> </div> <div><div><i></i></div></div> </div> </div> <div> <div> <div> 08月31日 </div> <div> <h5>微信缴费使用指南2</h5> <div><img src="https://www.jb51.net/~/assets/images/1.png" alt=""></div> <p>微信缴费使用指南</p> </div> <div><div><i></i></div></div> </div> </div> </div> </div> <div> <button type="button">确定</button> <button type="button" data-dismiss="modal">取消</button> </div> </div> </div> </div> <div tabindex="-1" role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span>×</span></button> <h4> 温馨提示 </h4> </div> <div> <h5>添加子菜单后，一级菜单的内容将被清除。确定添加子菜单？</h5> </div> <div> <button type="button">确定</button> <button type="button" data-dismiss="modal">取消</button> </div> </div> </div> </div> <div tabindex="-1" role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span>×</span></button> <h4> 温馨提示 </h4> </div> <div> <h5>数据异常</h5> </div> <div> <!-- <button type="button">确定</button> --> <button type="button" data-dismiss="modal">取消</button> </div> </div> </div> </div>
第三步：调用js文件
<script> $(function myfunction() { $('#editPage').show(); }); </script>
总结