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的交互
  6. ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)
  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表
  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
  9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

在点击左侧菜单中的选项时,我希望有Extjs、EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页面,如果不使用页签,那么每次要查看某个页面都要去重新调用并刷新,如果在网速慢或者该界面加载很耗时的情况下,简直会让人奔溃。因为我又不想引入整个ExtJs等的内容。自然而然的,就想到了去网上找这种ui插件。找到了许多,不过我觉得CleverTabs比较适合我这个项目。效果如下:

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持_第1张图片

Action

1、修改Right视图,添加如下js引用:

    
    
    
    
    

2、添加js方法:

   

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运行,你将看到如下效果:

    ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持_第2张图片

    框架中用到的js和css、ImgCssJsImg源码

    你可能感兴趣的:(ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持)