目录

  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. Building OpenCASCADE on Debian

    Building OpenCASCADE on Debian eryar@163.com Abstract. When you are familiar with OpenCASCADE on Win ...

  2. SVM算法

    本文主要介绍支持向量机理论推导及其工程应用. 1 基本介绍 支持向量机算法是一个有效的分类算法,可用于分类.回归等任务,在传统的机器学习任务中,通过人工构造.选择特征,然后使用支持向量机作为训练器,可 ...

  3. Android 设置对话框全屏

    1.在styles.xml中添加一个style: <style name="Dialog_Fullscreen"> <item name="androi ...

  4. IOS学习之初识KVC

    什么是kvc? kvc (key-value coding )键值编码,是ios 提供的一种通过key间接的来访问对象属性的一直方式. 哪些类支持kvc操作? kvc的操作方法由NSKeyValueC ...

  5. 详解 ML2 Core Plugin（I） - 每天5分钟玩转 OpenStack（71）

    我们在 Neutron Server 小节学习到 Core Plugin,其功能是维护数据库中 network, subnet 和 port 的状态,并负责调用相应的 agent 在 network ...

  6. 窥探Swift编程之别样的HelloWorld

    从今天就开始陆陆续续的发布一些有关Swift语言的东西,虽然目前在公司项目开发中Objective-C还是iOS开发的主力军,但是在不久的将来Swift将会成为iOS开发中的新生宠儿.所以在在Xcod ...

  7. MySQL线程池

    MySQL线程池只在Percona,MariaDB,Oracle MySQL企业版中提供.Oracle MySQL社区版并不提供. 在传统方式下,MySQL线程调度方式有两种:每个连接一个线程(one ...

  8. hibernate笔记--单(双)向的多对多映射关系

    在讲单向的多对多的映射关系的案例时,我们假设我们有两张表,一张角色表Role,一张权限表Function,我们知道一个角色或者说一个用户,可能有多个操作权限,而一种操作权限同时被多个用户所拥有,假如我 ...

  9. [linux]如何为Virtualbox虚拟硬盘扩容（转载）

    前言 这个教程介绍如何为Virtualbox虚拟硬盘扩容,虚拟硬盘分为动态分配大小和固定虚拟硬盘,扩容的方法不一样: 如何为动态分配的Virtualbox虚拟硬盘扩容 如何为固定大小的Virtualb ...

  10. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...