ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
- ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
- ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)
- ASP.NET MVC搭建项目后台UI框架—7、统计报表
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
- 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多页签支持的更多相关文章
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- 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 ...
- ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
随机推荐
- struts2+spring+hibernate 实现分页
在这里要感谢下这位博友发表的博文 http://www.blogjava.net/rongxh7/archive/2008/11/29/243456.html 通过对他代码的阅读,从而自己实现了网页分 ...
- Nginx配置文件nginx.conf详解
#定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...
- Disk Space Usage 术语理解:unallocated, unused and reserved
通过standard reports查看Disk Usage,选中Database,右击,选择Reports->Standard Reports->Disk Space Usage,截图如 ...
- 了解Package Configurations
使用VS2010创建的SSIS Project有两种deployment model:project deployment 和 package deployment,默认是Project deploy ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- Introduction of OpenCascade Foundation Classes
Introduction of OpenCascade Foundation Classes Open CASCADE基础类简介 eryar@163.com 一.简介 1. 基础类概述 Foundat ...
- 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据
我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...
- Last-Modified、If-Modified-Since 实现缓存和 OutputCache 的区别
先梳理三个概念: OutputCache:页面输出缓存,一般 ASP.NET 应用程序会用到. Last-Modified:Http 响应头(Http Reponse Header),由服务器发给客户 ...
- Josephus环问题
约瑟夫环问题 问题描述: Josephus问题可以描述为如下的一个游戏:N个人编号从1到N,围坐成一个圆圈,从1号开始传递一个热土豆,经过M次传递后拿着土豆的人离开圈子,由坐在离开的人的后面的人拿起热 ...
- Django 1.10 中文文档------3.3.8 会话sessions
django支持匿名会话.它将数据存放在服务器端,并抽象cookies的发送和接收过程.cookie包含一个会话ID而不是数据本身(除非你使用的是基于后端的cookie). 3.3.8.1 启用会话 ...