jquery仿微信公众号自定义菜单功能_jquery微信公众号自定义菜单插件资源-CSDN文库

共34个文件

png：10个

gif：5个

js：4个

自定义菜单

1星需积分: 42 164 浏览量 2018-03-16 15:22:42 上传评论 1 收藏 452KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

5aab6e3465ced.zip （34个子文件）

assets

fonts

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.eot 20KB

font

fontawesome-webfont.svg 193KB

fontawesome-webfont.eot 37KB

FontAwesome.otf 60KB

fontawesome-webfont.ttf 77KB

fontawesome-webfont.woff 43KB

images

navbg.gif 2KB

arrow2.gif 47B

20170831595cf16beb634972a65adb6b14abca9b.jpg 8KB

keyboard.png 2KB

error.png 734B

right.png 725B

emoji.png 1KB

message.png 7KB

1.png 3KB

arrow1.gif 1KB

background.png 788B

onLoad.gif 781B

date.png 328B

totop.png 3KB

header-bg.gif 847B

kefu.png 3KB

menu.js 23KB

Sortable.js 34KB

jquery-1.11.1.min.js 94KB

bootstrap.min.js 36KB

css

wx-custom.css 38KB

bootstrap.min.css 118KB

font-awesome.min.css 22KB

index.html 8KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>仿微信公众号自定义菜单设置网站模板</title> <meta name="keywords" content="仿微信公众号,自定义菜单" /> <meta name="description" content="仿微信公众号自定义菜单设置网站模板下载。自定义菜单实现添加，删除，修改等功能。" /> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/font-awesome.min.css">  <link rel="stylesheet" href="assets/css/wx-custom.css">  </head> <body> <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">公众号名称</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:;">删除菜单</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> <script src="assets/js/jquery-1.11.1.min.js"></script> <script src="assets/js/bootstrap.min.js"></script>  <script src="assets/js/Sortable.js"></script> <script src="assets/js/menu.js"></script> <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"> 温馨提示

评论收藏

内容反馈