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