ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持 - 邹琼俊 - 博客园

baacloud免费翻墙vpn注册使用

来源: ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持 – 邹琼俊 – 博客园

目录

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

在点击左侧菜单中的选项时,我希望有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视图中菜单的调用方法

<li><a target=”mainFrame” id=”channelManage” onclick=”goNewPage(‘/Channel/Index’,’渠道管理’);”>渠道管理</a></li& gt;

5、F5运行,你将看到如下效果:

框架中用到的js和css、Img:CssJsImg源码

博客地址: http://www.cnblogs.com/jiekzou/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏