ASP.NET MVC搭建項目後臺UI框架—四、tab多頁籤支持

時間 2019-11-29

標籤 asp.net asp mvc 搭建項目後臺框架 tab 多頁支持欄目 ASP 简体版

原文原文鏈接

在點擊左側菜單中的選項時，我但願有Extjs、EasyUI等中相似的tab頁籤功能，由於這樣能夠支持多個頁面的瀏覽，有時候咱們可能須要同時打開多個頁面，若是不使用頁籤，那麼每次要查看某個頁面都要去從新調用並刷新，若是在網速慢或者該界面加載很耗時的狀況下，簡直會讓人奔潰。由於我又不想引入整個ExtJs等的內容。天然而然的，就想到了去網上找這種ui插件。找到了許多，不過我以爲CleverTabs比較適合我這個項目。效果以下：javascript

Action

一、修改Right視圖，添加以下js引用：css

    <link href="~/Lib/CleverTabs/context/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery-ui.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery.cleverTabs.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery.contextMenu.js"></script>

二、添加js方法：html

   <script type="text/javascript">
           var tabs;
           $(function () {
               var h = $(document).height()-35;
               $("#tabs").height(h); //關於這裏我要說明一下，若是不設置高度的話，它默認並非發100%佔滿屏幕的，因此我這裏使用了計算的方式，初始化界面高度
               tabs = $('#tabs').cleverTabs();
               $(window).bind('resize', function () {
                   tabs.resizePanelContainer();
               });

               tabs.add({
                   url: 'http://www.cnblogs.com/jiekzou/',
                   label: '個人博客',
                   //開啓Tab後是否鎖定(不容許關閉，默認: false)
                   lock: false
               });
               $('input[type="button"]').button();

           });
           function addTab(url,name) {
               tabs.add({
                   url: url,
                   label: name
               });
           }</script>

三、修改Right視圖中body主體：java

<body>
     <div class="sidebar fleft"><div class="btn" id="divFolding"></div></div>
    <div id="tabs" style="overflow:hidden; padding-top:0px; height:400px;">
        <ul>
        </ul>
    </div>
    </body>

四、在Left視圖中，添加以下js方法：Left中的菜單點擊時調用Right視圖中的添加頁籤方法addTabjquery

        function goNewPage(url,name) {
            self.parent.frames["mainFrame"].addTab(url,name);
        }

修改Left視圖中菜單的調用方法服務器

<li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li>框架

五、F5運行，你將看到以下效果：ide

框架中用到的js和css、Img：CssJsImg源碼post

相關標籤/搜索

ASP.NET MVC搭建項目後臺UI框架—四、tab多頁籤支持

目錄

Action