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

时间：2021-09-27 07:33:48

第一步：添加引用文件

?
1
2
3
4
5
6
7
8
9
<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>

第二步：编写静态页面

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<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文件

?
1
2
3
4
5
<script>
 $(function myfunction() {
 $('#editPage').show();
 });
</script>

文件下载地址：5ba1e81947355.rar

总结

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

原文链接：https://www.cnblogs.com/divspan/archive/2018/11/12/9945416.html

标签：

相关文章