网站自助搭建,展示产品的网站 个人备案还是企业,什么是网站空间,营销网站排行榜前十名在VS中#xff0c;我们能打开多页签#xff0c;并在不同的页签之间进行浏览和操作#xff0c;这一功能通过JQuery插件CleverTabs也能实现此效果。CleverTabs下载请点击这里#xff1a;JQuery CleverTabs 本文采用ASP.NET MVC技术实现效果#xff1a;要在布局页中点击不同的… 在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 relstylesheet /
link href~/Scripts/CleverTabs/CleverTabs/context/themes/base/style.css relstylesheet /
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 classcontainer-fluiddiv classpanel panel-primarydiv classpanel-body col-md-2 stylemargin-top:50px;margin-left:50pxdiv classlist-groupa classlist-group-item stylecursor:pointer onclickclickone()h4 classlist-group-item-heading应用二/h4p classlist-group-item-text应用二描述/p/aa classlist-group-item disabledh4 classlist-group-item-heading应用三(失效)/h4p classlist-group-item-text应用三描述/p/aa classlist-group-item stylecursor:pointer onclickclicktwo()h4 classlist-group-item-heading应用四/h4p classlist-group-item-text应用四描述/p/aa classlist-group-itemh4 classlist-group-item-heading应用五/h4p classlist-group-item-text应用五描述/p/aa classlist-group-itemh4 classlist-group-item-heading应用六/h4p classlist-group-item-text应用六描述/p/a/div/divdiv classpanel-body col-md-9div idtabs stylemargin-top:50px*定义id为tabs,将页面放入tabs标签中*ulRenderBody()/ul/div/div/div/div 以上HTML代码中点击应用二和应用四触发click事件从而打开不同的页签。 JS代码如下图所示 script typetext/javascriptvar 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 idtabsul/ul/div
JS代码
script typetext/javascript$(function () {tabs $(#tabs).cleverTabs();tabs.add({url: http://think8848.cnblogs.com,label: think8848});});
/script CleverTabs详细说明: CleverTabs为所有Tab的容器
var tabs;
script typetext/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 typetext/javascriptvar 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 typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getCurrentTab();
/script
CleverTabs.getTabByUrl方法
获取指定url的Tab实例
script typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getTabByUrl(http://think8848.cnblogs.com);
/script
CleverTabs.clear方法
关闭tabs内所有未锁定的Tab
script typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.clear();
/script
CleverTab.deactivate方法
使Tab页面处于未激活状态但不建议在代码中使用 CleverTab.prevTab方法: 获取该Tab之前的Tab
script typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getTabByUrl(http://think8848.cnblogs.com);var prevTab tab.prevTab();
/script CleverTab.nextTab方法
获取该Tab之后的Tab
script typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getTabByUrl(http://think8848.cnblogs.com);var prevTab tab.nextTab();
/script
CleverTab.kill方法
从tabs中移移该Tab
script typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getTabByUrl(http://think8848.cnblogs.com);tab.kill();
/script
CleverTab.refresh方法
刷新该Tab的iframe中的内容
script typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getTabByUrl(http://think8848.cnblogs.com);tab.refresh();
/script
CleverTab.setDisable方法
设置该Tab的disabled属性设置disabled为true后自动设置该Tab的locked属性为true
script typetext/javascriptvar 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 typetext/javascriptvar tabs (#tabs).cleverTabs();var tab tabs.getTabByUrl(http://think8848.cnblogs.com);//参数true为锁定false或不提供值为解锁tab.setLock(true);
/script
当使用CleverTabs默认的PanelContainer时重新设置PanelContainer的size
script typetext/javascriptvar tabs;$(function () {tabs $(#tabs).cleverTabs();$(window).bind(resize, function () {//当发生window.resize事件时重新默认的tabs的PanelContainer的大小tabs.resizePanelContainer();});/script 注此插件使用的jQuery版本较早部分语法现在的jQuery版本已经不支持了。需要手动修改源JS文件。
