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=& ...
随机推荐
- PHP秒杀系统全方位设计分析（二）
商品页面开发 静态化展示页面[效率要比动态PHP高很多,PHP程序需要解析等步骤,本身就需要很多流程,整个下来PHP的处理花的时间和资源要多] 商品状态的控制 开始前.进行中.库存不足.结束 数据逻辑 ...
- SpringMVC基于注解方式的quartz
项目框架: SpringMVC.MyBatis.JSP 1. 首先配置spring.xml文件 <?xml version="1.0" encoding="UTF- ...
- 生信实验室收集---Dana Pe'er Lab
Dana Pe'er Lab of Computational Systems Biology Dana Pe'er是哥伦比亚大学生物科学系的副教授,被认为是计算系统生物学的主要研究人员之一.Dana ...
- MAC OS 命令行使用详解【转】
你可以整天驾驶汽车而不用知道如何修理它们,但是如果你希望当一个维护员,你就需要知道事情是如何运作的.同样的事情也发生在了 Mac OS X 上:你可以一直使用 Mac 而不用知道如何修理它,但是如果你 ...
- apache配置ssl
1.确认是否安装ssl模块 是否有mod_ssl.so文件 2.生成证书和密钥 linux下 步骤1:生成密钥 命令:openssl genrsa 1024 > server.key 说 ...
- 我的nlp之路（1）
1/8日任务 基础篇: 如何使用远程连接从windows或者linux连到服务器进行操作(切换用户,传递文件) (严禁使用root账户) Linux基本bash命令 a) 查看文件大小, ...
- SPSS 分布类型的检验
假设检验的标准步骤: 1.建立假设:根据问题的需要提出原假设H0,以及其对立面备择假设H1. 2.确立检验水准:即设立小概率事件的界值α. 3.进行试验:得到用于统计分析的样本,以该试验的结果作为假设 ...
- Exception occurred during processing request: null报错
报错, 恶心的一笔. 报错的地方 解决方法: 没注意到...
- 关系型数据库（RDBMS）与 MongoDB 的对应关系
谈一下关系型数据库(RDBMS)与 MongoDB 的对应关系:
- 20165332 2017-2018-2《Java程序设计》课程总结
20165332 2017-2018-2<Java程序设计>课程总结 一.每周作业及实验报告链接汇总 我期望的师生关系 学习基础和c语言基础调查 Linux安装及命令入门 第一周学习总结 ...