ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

傷城~ 2022-03-28 08:26 471阅读 0赞

### **目录** ###

1.  [ASP.NET MVC搭建项目后台UI框架—1、后台主框架][ASP.NET MVC_UI_1]
2.  [ASP.NET MVC搭建项目后台UI框架—2、菜单特效][ASP.NET MVC_UI_2]
3.  [ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开][ASP.NET MVC_UI_3]
4.  [ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持][ASP.NET MVC_UI_4_tab]
5.  [ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互][ASP.NET MVC_UI_5_Demo_Controller_View]
6.  [ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）][ASP.NET MVC_UI_6]
7.  [ASP.NET MVC搭建项目后台UI框架—7、统计报表][ASP.NET MVC_UI_7]
8.  [ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中][ASP.NET MVC_UI_8_View_Controller]
9.  [ASP.NET MVC搭建项目后台UI框架—9、服务器端排序][ASP.NET MVC_UI_9]

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

![162124164701918.jpg][]

## Action ##

1、修改Right视图，添加如下js引用：

2、添加js方法：

3、修改Right视图中body主体：

4、在Left视图中，添加如下js方法：Left中的菜单点击时调用Right视图中的添加页签方法addTab

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

修改Left视图中菜单的调用方法

5、F5运行，你将看到如下效果：

![162140137517771.jpg][]

框架中用到的js和css、Img：[CssJsImg源码][CssJsImg]

[ASP.NET MVC_UI_1]: http://www.cnblogs.com/jiekzou/p/4508392.html
[ASP.NET MVC_UI_2]: http://www.cnblogs.com/jiekzou/p/4508513.html
[ASP.NET MVC_UI_3]: http://www.cnblogs.com/jiekzou/p/4508638.html
[ASP.NET MVC_UI_4_tab]: http://www.cnblogs.com/jiekzou/p/4508707.html
[ASP.NET MVC_UI_5_Demo_Controller_View]: http://www.cnblogs.com/jiekzou/p/4508841.html
[ASP.NET MVC_UI_6]: http://www.cnblogs.com/jiekzou/p/4555452.html
[ASP.NET MVC_UI_7]: http://www.cnblogs.com/jiekzou/p/4555486.html
[ASP.NET MVC_UI_8_View_Controller]: http://www.cnblogs.com/jiekzou/p/4581244.html
[ASP.NET MVC_UI_9]: http://www.cnblogs.com/jiekzou/p/4643588.html#3227013
[162124164701918.jpg]: /images/20220328/54f484adcc9d4c1d9da2830f0184f8a1.png
[162140137517771.jpg]: /images/20220328/7719250c64924705bff6781cf2ea575e.png
[CssJsImg]: http://pan.baidu.com/s/1c0Cn3FU