目录

  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比较适合我这个项目。效果如下：

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>

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

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

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持的更多相关文章

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  2. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  3. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

随机推荐

  1. iOS 代码规范

    1 目的 统一规范XCode编辑环境下Objective-C.swift的编码风格和标准 2 适用范围 适用于所有用Objective-C,swift语言开发的项目. 3 编码规范 3.1 文件 项目 ...

  2. ASP.net 常用服务器控件

    新人初学,有错请指,大神轻喷. .net中有HTML控件和标准服务器控件. 老师教学用的是vs2010是这样分的,不知道15里是不是这样. 如果使用HTML控件我们就会发现页面中加载了原本HTML代码 ...

  3. hibernate用注解替代映射文件

    1.首先把原来的映射文件删掉,给实体类添加注解: @Entity //声明当前类为hibernate映射到数据库中的实体类 @Table(name="news") //声明tabl ...

  4. iOS----- Crash 分析（文三）- 符号化崩溃日志

    未符号化的崩溃日志就象一本天书,看不懂,更别谈分析崩溃原因了.所以我们在分析日志之前,要把日志翻译成我们可以看得懂的文字.这一步我们称之为符号化. 在iOS Crash分析(文一)中已经提到过符号化的 ...

  5. "org.eclipse.wst.validation" has been removed 导入maven 项目出错。

    在谷歌中找到解决方案: 右键关闭项目,在打开,将项目刷新,选中项目右键----->Maven4myeclipse------->Update maven project 错误消失. 若还有 ...

  6. SSISDB5：Parameter

    Parameter 是Package 提供给外界的接口,通过传递不同的Parameter value,能够动态控制 Package 执行不同的Task或container,产生不同的结果. 一,Par ...

  7. 每天多一点（2016.12.04）》Javascript隐式转换

    乱想 javascript为什么需要隐式转换?如果没有会出现什么情况? 找了一圈没有看到关于这个的讨论,只好自己研究了,可能不一定正确,自行辨知. 郁闷就是郁闷在好好的,为什么要搞个隐式转换,一般来讲 ...

  8. IIS7.5+WebConfig实现页面伪静态和301重定向

    IIS7.5+WebConfig实现页面伪静态和301重定向 使用URLRewriter组件在windows 2003 +iis 6.0下配置伪静态的文章网络上一大堆.但在iis7.0或iis 7.5 ...

  9. MVC 区域内默认控制器不能访问（Multiple types were found that match the controller named ‘Index'）

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 错误信息 和主页的默认控制器冲突了,修改下Areas里面的默认控制器就可以了

  10. LINQ系列：LINQ to SQL Concat/Union

    1. Concat 单列Concat var expr = (from p in context.Products select p.ProductName) .Concat( from c in c ...