码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 滑动选项卡jQuery tabulous.js

时间:2017-01-24 09:09:26      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:new   bottom   cti   vertica   12px   ott   ready   运行   jpg   

A jQuery tabs module for todays web!


技术分享
 

实例DEMO

运行一下

Documentation

Tabulous.js can be used with any contents you choose in the tabs and it couldn‘t be more simpler to use.

..:: Getting Started

Include the relevant files

Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before <head> section

 

Create the tabs
  1. <divid="tabs">
  2. <ul>
  3. <li><ahref="#tabs-1"title="">Tab 1</a></li>
  4. <li><ahref="#tabs-2"title="">Tab 2</a></li>
  5. <li><ahref="#tabs-3"title="">Tab 3</a></li>
  6. </ul>
  7. <divid="tabs_container">
  8. <divid="tabs-1">
  9. <!--tab content-->
  10. </div>
  11. <divid="tabs-2">
  12. <!--tab content-->
  13. </div>
  14. <divid="tabs-3">
  15. <!--tab content-->
  16. </div>
  17. </div><!--End tabs container-->
  18. </div><!--End tabs-->
复制
Initiate the plugin

Once you have created your tabs you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

  1. $(document).ready(function($){
  2. $(‘#tabs‘).tabulous();
  3. });
复制

If you want to initiate the plugin with options then you can do so like:

  1. $(‘#tabs‘).tabulous({
  2. effect:‘scale‘
  3. });
复制

..:: Options

VariableDefault ValueDescriptionValid Options
effect scale The effect to use for the transition scale / slideLeft / scaleUp / flip

 

jQuery 滑动选项卡jQuery tabulous.js

标签:new   bottom   cti   vertica   12px   ott   ready   运行   jpg   

原文地址:http://www.cnblogs.com/niuboren/p/6346400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!