jQuery Tools tab使用介绍 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
本文标签：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");的效果 是不是很强大呢 。 下面就以上配置参数说明描述如下：
事件
下面的示例说明如何访问API: 复制代码 代码如下: var api = $("#tabui").data("tabs"); // advance to the next tab api.next(); 以下列出的是所有API方法:
|
