jQuery Tools tab使用介绍

先给个官方例子。可以先弄出来看看效果
html


代码如下:

<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="./tabs-no-images.css"/>
</head>
<body><!-- tabs -->
<ul id="tabui" class="cs-tabs">
<li><a id="t1" href="#tab1">Tab 1</a></li>
<li><a id="t2" href="#tab2">Second tab</a></li>
<li><a id="t3" href="#tab3">A ultra long third tab</a></li>
</ul>
<!-- panes -->
<div id="tabpans" class="cs-panes">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
viverra, leo sit amet auctor fermentum, risus lorem posuere
tortor, in accumsan purus magna imperdiet sem.
</p>
<p>
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
nibh metus, faucibus quis, semper ut, dignissim id, diam.
</p>
</div>
<div>
<p>
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
molestie sed, tristique sit amet, blandit eu, turpis. Mauris
hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
molestie dui quam vitae dui.
</p>
<p>
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
tortor. Maecenas id augue. Vivamus interdum nulla ac
dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
eget dui volutpat molestie.
</p>
</div>
<div>
<p>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
nisl. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</p>
<p>
In sed dolor. Etiam eget quam ac nibh pharetra
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
nisi. Vivamus at enim. Integer semper imperdiet
massa. Vestibulum nulla massa, pretium quis, porta id,
vestibulum vitae, velit.
</p>
</div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
　　$(".cs-tabs:first").tabs(".cs-panes:first > div");
});
</script>
</body>
</html>

css


代码如下:

/* root element for tabs */
ul.cs-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
}
/* single tab */
ul.cs-tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.cs-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}
ul.cs-tabs a:hover {
background-color:#F7F7F7;
color:#333;
}
/* selected tab */
ul.cs-tabs a.on {
background-color:#ddd;
border-bottom:1px solid #ddd;
color:#000;
cursor:default;
}
/* tab pane */
.cs-panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:150px;
padding:15px 20px;
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:


代码如下:

var api = $("#tabui").data("tabs");
// advance to the next tab
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 进步到以前的选项卡。

赞 (0)

相关推荐

  • jQuery Tools Dateinput使用介绍

    帮助文档:传送门 html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools dateinput demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></s

  • jquery tools之tabs 选项卡/页签

    虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了

  • jquery tools 系列 scrollable学习

    复制代码 代码如下: <!-- navigator --> <div class="navi"></div> <!-- prev link --> <a class="prev"></a> <!-- root element for scrollable --> <div class="scrollable"> <div id="thu

  • jQuery Tools tooltip使用说明

    HTML 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jquery tools系列 overlay 学习第1/2页

    如scrollable的学习,首先给出操作的html目标代码: 复制代码 代码如下: <button rel="#overlay">Open overlay</button> <button rel="#overlay2">Other overlay</button> <div class="overlay" id="overlay">     <h2 styl

  • jquery tools之tooltip

    如tabs的学习,首先给出操作的html目标代码: 复制代码 代码如下: <form id="myform"> <h3> Registration Form</h3> <!-- username --> <label for="username">Username</label> <input id="username" /> <div class=&quo

  • jquery tools系列 expose 学习

    如overlay的学习,首先给出操作的html目标代码: 复制代码 代码如下: <div id="test">     expose test! </div> <div style="margin:0 auto;width:300px">     <img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball&q

  • jQuery Tools tab(幻灯片)

    jQuery Tools tab(幻灯片)

    html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jquery tools 系列 scrollable（2）

    jquery tools 系列 scrollable（2）

    scrollable提供的一系列获取scrollable对象的方法具体使用方式如下: 复制代码 代码如下: var scrollable=$("div.scrollable").scrollable();     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性     scrollable.getConf().speed=200;//设置配置对象的speed属性     //alert(scrollable.getIndex())

  • jQuery Tools tab使用介绍

    先给个官方例子.可以先弄出来看看效果 html 复制代码 代码如下: <!DOCTYPE html> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ --> <head> <title>jQuery Tools standalone demo</title> &

  • jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI Tab 选项卡问题小结

    需要解决的问题: 比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col

  • jquery编写Tab选项卡滚动导航切换特效

    jquery编写Tab选项卡滚动导航切换特效

    本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=

  • jQuery实现TAB风格的全国省份城市滑动切换效果代码

    jQuery实现TAB风格的全国省份城市滑动切换效果代码

    本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab

  • jQuery简单tab切换效果实现方法

    本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)

随机推荐