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
<divid="tabs"><ul><li><ahref="#tabs-1"title="">Tab 1</a></li><li><ahref="#tabs-2"title="">Tab 2</a></li><li><ahref="#tabs-3"title="">Tab 3</a></li></ul><divid="tabs_container"><divid="tabs-1"><!--tab content--></div><divid="tabs-2"><!--tab content--></div><divid="tabs-3"><!--tab content--></div></div><!--End tabs container--></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:
$(document).ready(function($){$('#tabs').tabulous();});
If you want to initiate the plugin with options then you can do so like:
$('#tabs').tabulous({effect:'scale'});
..:: Options
| Variable | Default Value | Description | Valid Options |
|---|---|---|---|
| effect | scale | The effect to use for the transition | scale / slideLeft / scaleUp / flip |
jQuery 滑动选项卡jQuery tabulous.js的更多相关文章
- jQuery 滑动选项卡jQuery tabslet
Tabslet Yet another jQuery plugin for tabs, lightweight, easy to use and with some extra features ...
- jQuery 滑动选项卡SmartTab
Smart Tab Overview Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy t ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- Jquery实现选项卡功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery滑动并响应事件
jQuery滑动并打开指定页面: <!DOCTYPE html> <html> <head> <script src="http://code.jq ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- 基于jQuery滑动分步式进度导航条代码
分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=& ...
随机推荐
- Python3.x：报错POST data should be bytes, an iterable of bytes
Python3.x:报错POST data should be bytes, an iterable of bytes 问题: python3.x:报错 POST data should be byt ...
- PHP 实现归并排序算法
算法原理 原理: 利用递归,先拆分.后合并.再排序. 步骤: 均分数列为两个子数列 递归重复上一步骤,直到子数列只有一个元素 父数列合并两个子数列并排序,递归返回数列 代码实现 // 归并排序主程序 ...
- 20145328 《Java程序设计》第3周学习总结
20145328 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 对象Object:存在的具体实体,具有明确的状态和行为 类Class:具有相同属性和行为的一组对象的集合,用 ...
- LeetCode (226):Invert Binary Tree 递归实现
Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...
- 简单的dos命令
cd .. 进入上一层目录cd /.. 进入当前盘所有根目录d: 进入d盘dir 查看下一级目录d:>d:\abc.txt 新建一个文档hostname 主机名SET 查看环境变 ...
- PHP 根据IP地址获取所在城市
header('Content-Type:text/html;Charset=utf-8'); function GetIp(){ $realip = ''; $unknown = 'unknown' ...
- 利用shell编程，部署项目到服务器
现在在前后端分离的开发形式中,每次前端将VUE项目打包之后,需要后端程序员部署到服务器上.这过程为何没有用git,因为每次vue打包后的文件都不相同与前一次打包,git为何的话,会包含过大迭代版本,同 ...
- UVa 10883 超级平均数（二项式系数+对数计算）
https://vjudge.net/problem/UVA-10883 题意: 给出n个数,每相邻两个数求平均数,依次类推,最后得到1个数,求该数. 思路: 演算一下可以发现最后各个数的系数就是二项 ...
- R 中的哪些命令或者包让你相见恨晚？--转载知乎
https://www.zhihu.com/question/24501195 节选: 看了这么多答案,觉得 Hadley Wickhamhad.co.nz 在R使用者的地位好高啊.其实我也觉得Had ...
- Python基础笔记系列十四：python无缝调用c程序
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! python语言可以对c程序代码进行调用,以弥补python语言低性能的缺 ...