目录

  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. UITest 单元测试常用的断言

    XCTFail(format…) 生成一个失败的测试: XCTFail(@"Fail"); XCTAssertNil(a1, format...) 为空判断, a1 为空时通过,反 ...

  2. 一次 Oracle 算出运算溢出问题 排查解决 (并非除数为零!)

    前段时间 出现过这个问题,: 表中有一列为number类型 rec_recordlength (两个时间的间隔长度/秒) 部分数据 统计这个字段就会出现 "算出运算溢出" 错误,很 ...

  3. iOS-常用的第三方框架的介绍

    写iOS 程序的时候往往需要很多第三方框架的支持,可以大大减少工作量,讲重点放在软件本身的逻辑实现上. GitHub 里面有大量优秀的第三方框架,而且 License 对商业很友好.一下摘录一下几乎每 ...

  4. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...

  5. Description Resource Path Location Type Error executing aapt: Return code -1073741819 Client line 1

    Logcat报错:Description    Resource    Path    Location Type Error executing aapt: Return code -1073741 ...

  6. Target-Action回调模式

    前面的博客中提到过回调的概念,是在OC通过协议来实现的回调,和Java中的接口的回调极为相似,下面来介绍另一种方法回调模式: Target-Action回调.首先我们来从字面意思来理解一下Target ...

  7. 编写简单的ramdisk（无请求队列）

    最近在研究块设备驱动的编写,看了赵磊大牛的<写一个块设备驱动>,受益匪浅,虽然能看懂里面说的,但动手写写代码还是能加深理解的,下面实现的ramdisk写的很简单,如果有错误,欢迎大牛们指正 ...

  8. .Net中DataAdapter批量插入和更新数据总结

    前言 前段时间一直在忙着项目上线,在做项目的同时遇到了一些之前不曾碰到的问题,因为没有经验,只能从网上找一些相关的解决方案,但是网上提供的资料实在是太杂,有的根本不能用,耗时又耗力. 我希望把我这段时 ...

  9. php模拟数据库常用操作效果

    test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...

  10. ZOJ Problem Set - 1292 Integer Inquiry

    题目本身属于简单题,但是注意在输出的时候,题目很变态的对格式做了很多要求: 1.输入的N与下面的block有一个空行 2.每次输出与下一个输入的block有一个空行 3.但是特别注意,当是最后一个输出 ...