asp.net 仿微信端菜單設(shè)置實(shí)例代碼詳解
更新時(shí)間：2018年11月12日 11:49:39 作者：東門書琴
本文通過實(shí)例代碼給大家介紹了asp.net 仿微信端菜單設(shè)置方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
第一步：添加引用文件
<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>
第二步：編寫靜態(tài)頁(yè)面
<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">字?jǐn)?shù)不超過5個(gè)漢字或16個(gè)字符</div> <div class="font_sml" style="display: none;">若無(wú)二級(jí)菜單，可輸入20個(gè)漢字或60個(gè)字符</div> </div> </div> <div class="form-group" id="radioGroup"> <label class="col-sm-2 control-label">菜單內(nèi)容:</label> <div class="col-sm-10 LebelRadio"> <label class="checkbox-inline"><input type="radio" name="radioBtn" value="sendmsg" checked> 發(fā)送消息</label> <label class="checkbox-inline"><input type="radio" name="radioBtn" value="link" > 跳轉(zhuǎn)網(wǎng)頁(yè)</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>從素材庫(kù)中選擇</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;"> 粉絲點(diǎn)擊該菜單會(huì)跳轉(zhuǎn)到以下鏈接: </label> </div> <div class="row"> <label class="col-sm-2 control-label" style="text-align: left;"> 頁(yè)面地址: </label> <div class="col-sm-5"> <input type="text" name="url" class="form-control" placeholder="認(rèn)證號(hào)才可手動(dòng)輸入地址"> <span class="help-block">必填,必須是正確的URL格式</span> </div> </div> </div> </div> </div> <div class="cm-edit-before"><h5>點(diǎn)擊左側(cè)菜單進(jìn)行操作</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">微信繳費(fèi)使用指南1</h5> <div class="msg-img"><img src="~/assets/images/20170831595cf16beb634972a65adb6b14abca9b.jpg" alt=""></div> <p class="msg-text">微信繳費(fèi)使用指南</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">微信繳費(fèi)使用指南2</h5> <div class="msg-img"><img src="~/assets/images/1.png" alt=""></div> <p class="msg-text">微信繳費(fèi)使用指南</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>添加子菜單后，一級(jí)菜單的內(nèi)容將被清除。確定添加子菜單？</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>數(shù)據(jù)異常</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>
第三步：調(diào)用js文件
<script>
$(function myfunction() {
$('#editPage').show();
});
</script>
文件下載地址：http://xiazai.jb51.net/201811/yuanma/5ba1e81947355.rar
總結(jié)
以上所述是小編給大家介紹的asp.net 仿微信端菜單設(shè)置實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 使用asp.net mvc,boostrap及knockout.js開發(fā)微信自定義菜單編輯工具(推薦)
- ASP.NET微信公眾號(hào)添加菜單
- ASP.NET MVC5+EF6+EasyUI后臺(tái)管理系統(tǒng) 微信公眾平臺(tái)開發(fā)之消息管理
- ASP.NET Core集成微信登錄
- ASP.NET實(shí)現(xiàn)QQ、微信、新浪微博OAuth2.0授權(quán)登錄
- asp.net實(shí)現(xiàn)微信公眾賬號(hào)接口開發(fā)教程
- ASP.NET微信開發(fā)（接口指南）
- asp.net微信開發(fā)（永久素材管理）
- asp.net微信開發(fā)（高級(jí)群發(fā)圖文）
相關(guān)文章
實(shí)例講解動(dòng)態(tài)加載gridview中的行及其樣式
加載gridview中的行及其樣式想必大家都知道，那么如何動(dòng)態(tài)加載呢？下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
asp.net url重寫的好處與方法，需要的朋友可以參考一下2013-04-04
這篇文章主要為大家詳細(xì)介紹了CKEditor自定義按鈕插入服務(wù)端圖片的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Visual Studio.Net 內(nèi)幕(6)...2006-09-09
asp.net(c#)開發(fā)中的文件上傳組件uploadify的使用方法（帶進(jìn)度條）
在asp.net開發(fā)中，有很多可以上傳的組件模塊，利用HTML的File控件(uploadify)的上傳也是一種辦法，這里為大家介紹一下（uploadify）的一些使用方法2012-12-12
DataList 中動(dòng)態(tài)綁定服務(wù)器子控件的代碼
DataList 中動(dòng)態(tài)綁定服務(wù)器子控件的代碼...2007-09-09
asp.net core 認(rèn)證和授權(quán)實(shí)例詳解
這篇文章主要為大家介紹了asp.net core 認(rèn)證和授權(quán)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
asp.net文件上傳帶進(jìn)度條實(shí)現(xiàn)案例（多種風(fēng)格）
這篇文章主要講解了asp.net文件上傳帶進(jìn)度條實(shí)現(xiàn)案例，有不同風(fēng)格的進(jìn)度條，一定有一款最適合你，感興趣的小伙伴們可以參考一下2015-09-09
asp.net core為IHttpClientFactory添加動(dòng)態(tài)命名配置
某些時(shí)候我們需要為HttpClient動(dòng)態(tài)配置一些東西, 例如證書等, 例如服務(wù)是一個(gè)回調(diào)服務(wù), 而被回調(diào)方采用了自定義的https(即自定義證書)，本文就將講述如何實(shí)現(xiàn)這種需求2021-06-06
ASP.NET 2.0提供了一個(gè)Menu 類，可以方便地創(chuàng)建水平或者垂直方向的下拉菜單，下面就是一個(gè)例子：2008-12-12