jQuery 滑动选项卡jQuery tabulous.js

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

Variable Default Value Description Valid Options
effect scale The effect to use for the transition scale / slideLeft / scaleUp / flip

猜你喜欢

转载自zaixianshouce.iteye.com/blog/2354685
今日推荐