首页 > 代码库 > jQuery 滑动选项卡jQuery tabulous.js

jQuery 滑动选项卡jQuery tabulous.js

2024-09-02 05:49:59   213人阅读

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($){
  3. $(‘#tabs‘).tabulous();
  5. });
复制

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


联系
我们