干货jquery插件分享之tab。

tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试:

tabulous.js

A jQuery tabs module for todays web!

不过这个插件要IE10及以上才能支持,^-^!!

演示图片:

 

使用方法:

1. head中引入脚本及样式

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

2. 创建tab html内容

<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul> <div id="tabs_container"> <div id="tabs-1">
<!--tab content-->
</div> <div id="tabs-2">
<!--tab content--> </div> <div id="tabs-3">
<!--tab content-->
</div> </div><!--End tabs container--> </div><!--End tabs-->

3. 脚本调用

$(document).ready(function ($) {
$('#tabs').tabulous({ effect: 'scale' });
});

支持特效:Scale、Slide、Scale Up、Filp

大家可以去这里看看演示::http://www.xuetub.com/plugin/jquery/189

jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮的更多相关文章

  1. 用jquery编写的tab插件

    用jquery编写的tab插件 源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find(&qu ...

  2. 10个jQuery插件分享

    原文:http://www.shejidaren.com/10-jquery-plugins.html blur.js blur.js是一个很有意思的插件,它能实现像WIN7 AERO效果的JS插件, ...

  3. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

  4. 学会自己写jQuery插件(二)---自己写的tab插件

    通过上一个基础篇我们知道插件的格式,这次我来写一个tab插件 $(function() { $.fn.插件名称 = function(options) { var defaults = { Event ...

  5. 15 款 jQuery 社交分享插件

    过去几年中社交媒体越来越流行了,能够分享音乐.视频.图像甚至是其他的 docs 文档到互联网上去,这样子还能够提高页面的点击量.通常,一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台 ...

  6. IDEA优秀插件分享之---Mybatis Log Plugin

    小伙伴们在使用mybatis的时候有时候会出现一些sql异常,这个时候就需要对执行的sql语句进行检查.然而mybatis一般使用log4j打印执行的sql语句,类型下面这种的: 这个时候如果sql语 ...

  7. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  8. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  9. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

随机推荐

  1. django的过滤和搜索排序功能django-filter

    参考: 1.https://django-filter.readthedocs.io/en/master/guide/usage.html#the-filter 2.https://www.cnblo ...

  2. 数学图形(2.23)Cylindric sine wave柱面正弦曲线

    柱面正弦曲线 #http://www.mathcurve.com/courbes3d/couronnetangentoidale/couronnetangentoidale.shtml vertice ...

  3. Hadoo生态中pHive HBase 项目的区别

    http://jenmhdn.iteye.com/blog/1678789 导读:Apache Hive是一个构建于Hadoop(分布式系统基础架构)顶层的数据仓库,Apache HBase是运行于H ...

  4. mysql之ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'解决方法

    LAMPP安装完成之后,mysql -u root -p连不上,报这个错误: ERROR 2002 (HY000): Can't connect to local MySQL server throu ...

  5. TensorFlowIO操作(三)------图像操作

    图像操作 图像基本概念 在图像数字化表示当中,分为黑白和彩色两种.在数字化表示图片的时候,有三个因素.分别是图片的长.图片的宽.图片的颜色通道数.那么黑白图片的颜色通道数为1,它只需要一个数字就可以表 ...

  6. drawable和values的加载规则

    Google搞了一大套hdpi.xhdpi之类的这些东西,简单说来,就是为了让我们轻松实现"与设备密度无关的视觉大小一致性",注意这里的"视觉大小一致性",就是 ...

  7. 【干货合集】Docker快速入门与进阶

    收录待用,修改转载已取得腾讯云授权 Docker 在众多技术中,绝对是当红炸子鸡.这年头,如果你不懂一点容器,不学一些Docker,还怎么出去跟人炫耀技术? Docker 也是云计算技术中较为热门的一 ...

  8. UIWebView页面的控制(二)

    1.UIWebView的内容控制的属性/方法列表 loading属性               确认当前页面是否在读入中 canGoForward属性   确认goForward  方法是否可运行, ...

  9. java创建二叉树并实现非递归中序遍历二叉树

    java创建二叉树并递归遍历二叉树前面已有讲解:http://www.cnblogs.com/lixiaolun/p/4658659.html. 在此基础上添加了非递归中序遍历二叉树: 二叉树类的代码 ...

  10. Python 3 解析 html

    资料:https://docs.python.org/3/library/html.parser.html python 自带了一个类,叫 HTMLParser. 我们用的时候需要自己定义一个类,继承 ...