ASP.NET MVC搭建項目后台UI框架—4、tab多頁簽支持

本文轉載自查看原文 2015-05-17 21:22 13358 ASP.NET MVC

在點擊左側菜單中的選項時，我希望有Extjs、EasyUI等中類似的tab頁簽功能，因為這樣可以支持多個頁面的瀏覽，有時候我們可能需要同時打開多個頁面，如果不使用頁簽，那么每次要查看某個頁面都要去重新調用並刷新，如果在網速慢或者該界面加載很耗時的情況下，簡直會讓人奔潰。因為我又不想引入整個ExtJs等的內容。自然而然的，就想到了去網上找這種ui插件。找到了許多，不過我覺得CleverTabs比較適合我這個項目。效果如下：

Action

1、修改Right視圖，添加如下js引用：

    <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>

2、添加js方法：

   <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>

3、修改Right視圖中body主體：

<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>

4、在Left視圖中，添加如下js方法：Left中的菜單點擊時調用Right視圖中的添加頁簽方法addTab

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

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

5、F5運行，你將看到如下效果：

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

ASP.NET MVC搭建項目后台UI框架—4、tab多頁簽支持

目錄

Action

免責聲明！