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=& ...
随机推荐
- 20145301《Java程序设计》第10周学习总结
20145301 <Java程序设计>第十周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据 计算机网络 路由器和交换机组成了核心的计算机 ...
- C++ 程序崩溃时生成Dump文件
#include <DbgHelp.h> //生产DUMP文件 int GenerateMiniDump(HANDLE hFile, PEXCEPTION_POINTERS pExcept ...
- Centos7服务器搭建VNC Server环境
在企业级项目的开发中,尤其是分布式项目,经常直接在服务器上进行开发工作,操作系统环境一般是Centos 7.普遍状况是,在服务器上安装IDE 开发工具,通过 Xshell等工具远程启动,本地通过虚拟桌 ...
- Windows下安装Redis服务、搭建简单Redis主从复制
Redis拥有非常强大的主从复制功能,而且还支持一个master可以拥有多个slave,而一个slave又可以拥有多个slave,从而形成强大的多级服务器集群架构.目前在同一台window下安装三个r ...
- 转载：poj题目分类（侵删）
转载:from: POJ:http://blog.csdn.net/qq_28236309/article/details/47818407 按照ac的代码长度分类(主要参考最短代码和自己写的代码) ...
- Extjs的form跨域提交文件时，无法获取返回结果
form文件表单跨域提交时,无法获取远程服务器的返回结果,form提交代码如下: form.submit({ url:'http://{remoteUrl}/hgisserver/wrds/file' ...
- MATLAB 2014a (8.3) Compiler Runtime （MCR）
在安装的时候可以 ./install -H 界面化安装到自己目录下 MATLAB 2014a (8.3) Runtime Compiler (MCR) Errors when trying to la ...
- ThinkPHP开发笔记-视图
1.如果要在模板中输出变量,必须在在控制器中把变量传递给模板,系统提供了assign方法对模板变量赋值,无论何种变量类型都统一使用assign赋值,而且assign方法必须在display和show方 ...
- linux基础之Vim
- Lubuntu系统中java，tomcat的环境搭建（virtualbox中）
一.安装Lubuntu系统 这一步没什么说的,到官网下载镜像,在virtualbox中安装即可安装时就已经可以选择安装源,当然,选中国的设置环装网络,可将该虚拟机设立为网络上的独立IP,和物理机间可以 ...