利用JQuery插件CleverTabs实现多页签打开效果

在VS中,我们能打开多页签,并在不同的页签之间进行浏览和操作,这一功能通过JQuery插件CleverTabs也能实现此效果。CleverTabs下载请点击这里:JQuery CleverTabs

 本文采用ASP.NET MVC技术实现效果:要在布局页中点击不同的选择栏,根据不同的选择栏打开不同的网页链接而新增不同页签效果。首先新建 一个空的MVC项目,并在_Layout布局页中引入JS和CSS文件,如下图所示:

<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.js"></script>//JS文件是必须的
<link href="~/Scripts/CleverTabs/CleverTabs/context/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/CleverTabs/CleverTabs/context/themes/base/style.css" rel="stylesheet" />
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery-ui.js"></script>
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.cleverTabs.js"></script>
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.contextMenu.js"></script>

页面的HTML代码如下图所示:

  <div class="container-fluid"><div class="panel panel-primary"><div class="panel-body col-md-2" style="margin-top:50px;margin-left:50px"><div class="list-group"><a class="list-group-item" style="cursor:pointer" onclick="clickone()"><h4 class="list-group-item-heading">应用二</h4><p class="list-group-item-text">应用二描述</p></a><a class="list-group-item disabled"><h4 class="list-group-item-heading">应用三(失效)</h4><p class="list-group-item-text">应用三描述</p></a><a class="list-group-item" style="cursor:pointer" onclick="clicktwo()"><h4 class="list-group-item-heading">应用四</h4><p class="list-group-item-text">应用四描述</p></a><a class="list-group-item"><h4 class="list-group-item-heading">应用五</h4><p class="list-group-item-text">应用五描述</p></a><a class="list-group-item"><h4 class="list-group-item-heading">应用六</h4><p class="list-group-item-text">应用六描述</p></a></div></div><div class="panel-body col-md-9"><div id="tabs" style="margin-top:50px">@*定义id为tabs,将页面放入tabs标签中*@<ul>@RenderBody()</ul></div></div></div></div>

以上HTML代码中,点击应用二和应用四触发click事件从而打开不同的页签。 JS代码如下图所示:

<script type="text/javascript">var tabs;$(document).ready(function () {var h = $(document).height() - 100;$("#tabs").height(h); //如果不设置高度的话,它默认并不是发100%占满屏幕的,所以我这里使用了计算的方式,初始化界面高度tabs = $('#tabs').cleverTabs();$(window).bind('resize', function () {tabs.resizePanelContainer();});});function clickone() {tabs.add({id: 'uniqueId',//id必须唯一url: "/Home/About",label: "关于",});}function clicktwo(){tabs.add({id: 'uniqueId2',url: "/Home/Contact",label: "联系",});}
</script>

运行效果如下图所示:在未点击应用二和应用四的时候: 

点击应用二时: 

点击应用四时: 

 

就这样,一个多页签的效果就实现了,可见很多JQuery的控件还是很强大的。并附上CleverTabs的相关说明:

初级应用说明: 

HTML代码: 

<div id="tabs"><ul></ul></div>

JS代码: 

<script type="text/javascript">$(function () {tabs = $('#tabs').cleverTabs();tabs.add({url: 'http://think8848.cnblogs.com',label: 'think8848'});});
</script>

CleverTabs详细说明: 

 CleverTabs为所有Tab的容器:

var tabs;
<script type="text/javascript">$(function () {tabs = $('#tabs').cleverTabs({//是否安装右键菜单(默认: true)setupContextMenu: true,//右键菜单定义, 右键菜单功能由jquery.contextMenu插件提供//详见: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin///本插件中对原contextMenu插件中的样式做了修改,使用了jQuery UI皮肤contextMenu: {element: $('#contextMenuElementId'),handler: function (action, el, pos) { /*do something...*/ }},//开启Tab后是否锁定(不允许关闭,默认: false)lock: false,//开启Tab后是否禁用(不允许激活和操作iframe内容,默认: false)disable: false,//当tabs中只有一个Tab时,是否锁定该Tab(默认: true)lockOnlyOne: true,//显示iframe的容器(默认创建在tabs元素中)panelContainer: $('#panelContainerElementId')/*,其中tabHeaderTemplate: '', //(Tab用于控制的头模板)tabPanelTemplate: '', //(Tab用于显示的Panel模板)uidGenerator: function() {} //(Tab唯一id生成器) 功能现在不启用,等有时间完善后再启用*/});tabs.add({url: 'http://think8848.cnblogs.com',label: 'think8848'});});
</script>

CleverTabs.add方法

添加一个新的Tab并使之成为激活状态,如果将要添加的url已经存在,则会激活该Tab :

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();tabs.add({//必须是在tabs内唯一的idid: 'uniqueId',//将要在iframe的src属性设置的值url: 'iframe.src',//显示在Tab头上的文字label: 'tab header',//关闭本Tab时需要刷新的Tab的url(默认: null)closeREfresh: 'tab url',//关闭本Tab时需要激活的Tab的url(默认: null)closeActivate: 'tab url',//关闭本Tab时需要执行的回调函数callback: function () { /*do something*/ }});
</script>

CleverTabs.getCurrentTab方法

获取当前处于激活状态的Tab

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getCurrentTab();
</script>

CleverTabs.getTabByUrl方法

获取指定url的Tab实例 

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
</script>

CleverTabs.clear方法

关闭tabs内所有未锁定的Tab 

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.clear();
</script>

CleverTab.deactivate方法

使Tab页面处于未激活状态,但不建议在代码中使用 
CleverTab.prevTab方法: 
获取该Tab之前的Tab  

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');var prevTab = tab.prevTab();
</script>

 

CleverTab.nextTab方法

获取该Tab之后的Tab

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');var prevTab = tab.nextTab();
</script>

CleverTab.kill方法

从tabs中移移该Tab

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');tab.kill();
</script>

CleverTab.refresh方法

刷新该Tab的iframe中的内容

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');tab.refresh();
</script>

CleverTab.setDisable方法

设置该Tab的disabled属性,设置disabled为true后,自动设置该Tab的locked属性为true   

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');//参数true为禁用,false或不提供值为启用tab.setDisable(true);
</script>

CleverTab.setLock方法

设置该Tab的locked属性,设置locked为true后,该Tab的不允许关闭    

<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');//参数true为锁定,false或不提供值为解锁tab.setLock(true);
</script>

当使用CleverTabs默认的PanelContainer时,重新设置PanelContainer的size:

<script type="text/javascript">var tabs;$(function () {tabs = $('#tabs').cleverTabs();$(window).bind('resize', function () {//当发生window.resize事件时,重新默认的tabs的PanelContainer的大小tabs.resizePanelContainer();});</script>

 


注:此插件使用的jQuery版本较早,部分语法现在的jQuery版本已经不支持了。需要手动修改源JS文件。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

指针的一个简单应用

#include "stdafx.h" int main(int argc, char* argv[]){ //string s("hello world"); string s "hello world"; string *p &s; *p "goodbye";//此时字符串s的值也变化了 string *sp &s; sp p; *sp "new another w…

精通ASP.NET MVC ——路由

本文章将关注定义路由&#xff0c;并使用它们去处理URL&#xff0c;使用户能够到达控制器和动作。 文章非常长&#xff0c;可以对路由机制有较初步的了解。首先创建示例项目&#xff0c;项目名为UrlAndRoutes&#xff0c;如下图所示&#xff1a; 然后是创建示例控制器和示例视图…

建立丰富多彩的toast的简单实例

为toast中的view显示建立一个layout的xml文件&#xff0c;放到res的layout目录下 下面是对xml的调用 //先通过LayoutInflater来将xml文件中的 Layout变成一个view。这个类可以将XML实例化&#xff0c;形成一个View。以文本为例&#xff0c;要从一个XML文档生成一个可供使用的Vi…

ASP.NET Web API简单学习

Web API 简介 Web API可以返回 json、xml类型的数据&#xff0c;对于数据的增删改查&#xff0c;提供了对应的资源操作&#xff0c;按照要求的类型进行处理&#xff0c;主要包括&#xff1a;Get&#xff08;查&#xff09;&#xff0c;Post&#xff08;增&#xff09;&#xff…

我的家庭私有云计划-2

嗯&#xff0c;继续。 刚才调试了一个崩溃型bug&#xff0c;都不是大问题&#xff0c;但几个小问题加到一起&#xff0c;居然弄崩溃了。这种远因叠加的bug最难找&#xff0c;还好找到了。 拿到预算了&#xff0c;下面做什么&#xff1f; 我是商用程序员&#xff0c;习惯性要做需…

利用NCO 3.0 调用SAP中的函数

简介 .Net Connector 3.0&#xff0c;简称 Nco3.0。Nco3.0 是 SAP 针对 .net 平台提供的编程接口&#xff0c;由 Nco1.0/Nco2.0 演变而来。如果使用 .net 平台编程&#xff0c;推荐使用 NCo3.0。3.0 版与之前1.0/2.0 版本比较&#xff0c;不管是 API 还是架构&#xff0c;都重新…

char与varchar区别(MYISAM)

Char属于固定长度的字符类型&#xff0c;而varchar属于可变长的字符类型。 下表将各种字符串值保存到char(4)和varchar&#xff08;4&#xff09;列后的结果&#xff0c;说明了char和varchar之间的差别 值 Char(4) 存储需求 Varchar (4) 存储需求 ‘’ ‘ ’ 4字符节…

以团队之名

我们是一群来自草根的互联网团队&#xff0c;以团队之名~ 转载于:https://www.cnblogs.com/weblab/archive/2012/04/01/2429427.html

Win10系统局域网中的其他电脑能Ping通但是无法访问本地IIS发布的网站

局域网中的其他电脑无法访问本地IIS发布的网站&#xff0c;但是能ping通&#xff0c;基本是由于没开放端口的原因。 打开防火墙 —— 高级设置&#xff1a; 点击“入站规则”&#xff0c;然后是“新建规则”&#xff1a; 然后选择“端口” &#xff1a; 选择“TCP”&#xff0c…

Bash shell脚本练习(一)

一、此题来源51cto linux论坛版 用户输入A;B;C;D;E;F;G 输入A的话就查看/etc/passwd最后5个系统用户&#xff0c;只要显示用户名和UID就行了&#xff0c;其他不要 输入B的话就显示系统开机时间多久了 输入C的话就判断当前磁盘根目录使用情况是否超过50%&#xff0c;如果超过50%…

ASP.NET Web API 中的属性路由

为什么要有属性路由 基于约定路由的一个优点是模板在单个位置中定义&#xff0c;并且路由规则在所有控制器上一致的应用。但是基于约定的路由很难支持RESTFUl 中常见的某些URI模式。例如&#xff0c;资源通常包含子资源&#xff0c;客户有订单&#xff0c;电影有演员&#xff…

C#调试WebService

简单调试 1、首先&#xff0c;新建一个WebService项目用于测试&#xff0c;如下图所示&#xff1a; 2、项目会默认生成一个Hello方法&#xff0c;但是由于Hello方法太简单&#xff0c;添加一个Add方法用于计算两个整数之和&#xff0c;如下图所示&#xff1a; [WebMethod]publ…

ArchLinux学习之环境变量

2019独角兽企业重金招聘Python工程师标准>>> 使得刚修改的环境变量生效&#xff1a;source <带环境变量的文件> 查看环境变量&#xff1a; env 或 set 持久化的环境变量主要存在于这几个文件中&#xff1a; /etc/profile/etc/environment~/.bash_profile~/.b…

ASP.NET Web API中的返回值

本文将Web API中常用的返回值罗列了一下&#xff0c;如需要进一步详细了解&#xff0c;请点击这篇文章 返回值继承接口描述void无返回http状态码204&#xff0c;告诉客户端此请求没有返回值Json<T>(T content)IHttpActionResult返回某种类型的Json字符串OkIHttpActionRe…

精通ASP.NET MVC ——属性路由

在上一篇文章中&#xff0c;有约定路由的介绍。MVC 5中增加了对属性路由这一新技术的支持。在属性路由中&#xff0c;路由是由直接运用于控制器的C#属性定义的。 启动和运用属性路由 默认情况下属性路由是禁止的&#xff0c;通过MapMvcAttributeRoutes扩展方法可以启用它。该…

ntp的一个小错误

[rootlocalhost ~]# ntpdate 10.128.14.25 3 Apr 21:05:05 ntpdate[1506]: the NTP socket is in use, exiting 收到此错误消息的原因是由于 xntpd 已经绑定到了该 Socket。运行 ntpdate 时&#xff0c;它会首先进行广播&#xff0c;然后侦听端口 123。如果 xntpd 正在运行&am…

ASP.NET MVC 阻止通过URL访问服务器上的静态资源文件

背景 在默认情况下&#xff0c;MVC框架是支持对服务器静态资源的访问的&#xff0c;我们在项目根目录下新建一个Content文件夹&#xff0c;然后添加一个命名为“StaticContent.html”的html文件&#xff0c;如下图所示&#xff1a; StaticContent.html中的代码如下图所示&…

怀念一下过去的人和事

年轻的时候&#xff0c;有大把的时间可以胡折腾。现在这人已经成了过去了&#xff0c;只生存在另一个平行空间了&#xff0c;也许在另外的空间里&#xff0c;另一个我还每天弹着重金属&#xff0c;喝酒吃肉。昔人已抱吉他去&#xff0c;此地空余效果器。现在廉颇老矣&#xff0…

linux 调优 网络调优

1 UDP buffer size sysctl -a 接收 net.core.rmem_default (默认)net.core.rmem_max (最大)发送 net.core.wmem_default (默认)net.core.wmem_default &#xff08;最大&#xff09;2 TCPbuffer sizesysctl -a net.ipv4.tcp_mem 最小 合理 最大&…

精通ASP.NET MVC——控制器和动作

在MVC框架中&#xff0c;控制器必须实现System.Web.Mvc命名空间的IController接口&#xff0c;如下图所示&#xff1a; //// 摘要:// 定义控制器所需的方法。public interface IController{//// 摘要:// 执行指定的请求上下文。//// 参数:// requestContext:// 请…