提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

jQueryToolstab使用介绍

使用 介绍
2023-06-13 09:14:34 时间
先给个官方例子。可以先弄出来看看效果
html
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<!--
ThisisajQueryToolsstandalonedemo.Feelfreetocopy/paste.
http://flowplayer.org/tools/demos/
-->
<head>
<title>jQueryToolsstandalonedemo</title>
<!--includetheTools-->
<scriptsrc="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!--standalonepagestyling(canberemoved)-->
<linkrel="shortcuticon"href="/media/img/favicon.ico">
<linkrel="stylesheet"type="text/css"
href="./tabs-no-images.css"/>
</head>
<body><!--tabs-->
<ulid="tabui"class="cs-tabs">
<li><aid="t1"href="#tab1">Tab1</a></li>
<li><aid="t2"href="#tab2">Secondtab</a></li>
<li><aid="t3"href="#tab3">Aultralongthirdtab</a></li>
</ul>
<!--panes-->
<divid="tabpans"class="cs-panes">
<div>
<p>
Loremipsumdolorsitamet,consecteturadipiscingelit.Duis
viverra,leositametauctorfermentum,risusloremposuere
tortor,inaccumsanpurusmagnaimperdietsem.
</p>
<p>
Suspendisseenim.Pellentesquefacilisisaliquamenim.Maecenas
facilisismolestielectus.Sedornareultriciestortor.Vivamus
nibhmetus,faucibusquis,semperut,dignissimid,diam.
</p>
</div>
<div>
<p>
Maurisultricies.Namfeugiategestasnulla.Donecauguedui,
molestiesed,tristiquesitamet,blanditeu,turpis.Mauris
hendrerit,nisietsodalestempor,orcitelluslaoreetelit,sed
molestieduiquamvitaedui.
</p>
<p>
Pellentesquenisl.Utadipiscingvehicularisus.Nameget
tortor.Maecenasidaugue.Vivamusinterdumnullaac
dolor.Fuscemetus.Suspendisseeupurus.Maecenasquislacus
egetduivolutpatmolestie.
</p>
</div>
<div>
<p>
Maecenasatodio.Nunclaoreetlectusvelante.Nullam
imperdiet.Sedjustodolor,mattiseu,euismodsed,tempusa,
nisl.Cumsociisnatoquepenatibusetmagnisdisparturient
montes,nasceturridiculusmus.
</p>
<p>
Inseddolor.Etiamegetquamacnibhpharetra
adipiscing.Nullamvitaeligula.Sedsitametleositametarcu
mollisultrices.Vivamusrhoncussapienneclorem.Inmattis
nisi.Vivamusatenim.Integersemperimperdiet
massa.Vestibulumnullamassa,pretiumquis,portaid,
vestibulumvitae,velit.
</p>
</div>
</div>
<!--activatetabswithJavaScript-->
<script>
$(function(){
//:firstselectorisoptionalifyouhaveonlyonetabsonthepage
　　$(".cs-tabs:first").tabs(".cs-panes:first>div");
});
</script>
</body>
</html>

css
复制代码代码如下:

/*rootelementfortabs*/
ul.cs-tabs{
margin:0!important;
padding:0;
height:30px;
border-bottom:1pxsolid#666;
}
/*singletab*/
ul.cs-tabsli{
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/*linkinsidethetab.usesabackgroundimage*/
ul.cs-tabsa{
float:left;
font-size:13px;
display:block;
padding:5px30px;
text-decoration:none;
border:1pxsolid#666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px4px00;
}
ul.cs-tabsa:hover{
background-color:#F7F7F7;
color:#333;
}
/*selectedtab*/
ul.cs-tabsa.on{
background-color:#ddd;
border-bottom:1pxsolid#ddd;
color:#000;
cursor:default;
}
/*tabpane*/
.cs-panesdiv{
display:none;
border:1pxsolid#666;
border-width:01px1px1px;
min-height:150px;
padding:15px20px;
background-color:#ddd;
}

该功能是通过jqueryObject.tabs()方法来实现的
$(".cs-tabs:first").tabs(".cs-panes:first>div");
官方是用的class，我对div都加了id。
$("#tabui").tabs("#tabpans>div");
$("#tabui").tabs("#tabpans>div",{event:"click",tab:"p",effect:"default",current:"on"});
这两个同同$(".cs-tabs:first").tabs(".cs-panes:first>div");的效果
　　是不是很强大呢。
　　下面就以上配置参数说明描述如下：
属性名称 默认值 描述 current "current" CSS类名当前活跃的选项卡。 effect "default"

效果被用来当点击一个选项卡。这可以戏剧性地改变这种行为的选项卡。这是可用的内置的效果:

  • "default" :一个简单的显示/隐藏效果。这个标签的默认行为。
  • "fade" :这个选项卡内容逐渐显示从零到完全不透明。
  • "ajax" :从服务器加载选项卡内容使用AJAX。 视图示例 。
  • "slide" :垂直滑动效果,合适的对于 手风琴导航 。
  • "horizontal" :水平的幻灯片效果,合适的对于 水平手风琴导航 。

你也可以 让自己的效果 。

event "click" 指定事件一个选项卡时打开。默认情况下,这个发生在当用户单击选项卡。另一个有效值是 “mouseover” 和 ‘dblclick" 。 fadeInSpeed 200 自从1.0.1。 唯一可用一起使用时与“fade”效应。该属性定义了加快(毫秒)打开的面板中显示其内容。 fadeOutSpeed 0 自从1.1.0版。 唯一可用一起使用时与“fade”效应。该属性定义了加快(毫秒)打开窗格中隐藏了它的内容。一个积极的这里的价值将导致“crossfade”作用演示了 这里 。 history false 自从1.2.0 。浏览器的支持“后退按钮”,这样当用户点击后退或前进按钮打开相应的选项卡。要求这个 历史工具 是包括在你的页面。 initialIndex 0 指定选项,最初打开当页面加载。这将自动触发一个 点击 事件为选项卡指定在本财产。指定 null 或者一个负数这里不会触发 点击 事件在页面加载导致所有选项卡最初将关闭。 rotate false 自从1.1.0版。 当最后一个选项卡是开放和这个 next() 调用API调用,然后选项卡将从头开始,当第一个选项卡是开放和这个 上一页() 调用调用选项卡将提前最后一个选项卡。这是证明在 这里 。 tabs "a" 一个选择器进行元素,用作标签在根元素。如果没有发现然后的直接子根元素用于为选项卡。
事件
事件 触发时间 onBeforeClick 点击一个标签之前。第二个参数是指数被单击的选项卡。 onClick 点击后一个选项卡。第二个参数是指数点击的选项。脚本API
下面的示例说明如何访问API:
复制代码代码如下:
varapi=$("#tabui").data("tabs");
//advancetothenexttab
api.next();

以下列出的是所有API方法:
方法 返回值 描述/例子 click(index) API 激活选项卡中指定的参数。参数可以是要么是 整数 数字指定标签指数(从0开始),或者当选项卡 一个 标记,它可以 href 属性作为援引 字符串 。 destroy() API 自从1.2.3 完全删除现有的标签实例。 getConf() Object 自从1.0.1。 返回配置对象标签的实例。这个对象可以被修改,变化是动态地反映在行为上的标签。 getCurrentPane() jQuery 返回当前面板作为jQuery对象。 getCurrentTab() jQuery 返回当前标签作为一个jQuery对象。 getIndex() integer 返回当前选项卡指数。 getPanes() jQuery 返回jQuery对象窗格作为。 getTabs() jQuery 返回标签作为一个jQuery对象。 next() API 前进到下一个选项卡。 prev() API 进步到以前的选项卡。

相关文章