jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

干货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

时间: 2024-11-29 09:31:11

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

jQuery Tab插件

继续学习插件的写法,简单的Tab插件,自适应宽度. 地址:https://github.com/zjzhome/jquery.tab.js 使用方法比较简单,写好html后一句Js即可,只有三个选项,后续继续扩展.

20 个最棒的 jQuery Tab 插件

jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 jQuery 插件,可以创建基于 Tab 的内容滑块,并提供一个可定制的滑块控制. 2. jQuery Contact Tabs 这是一个 jQuery 的表单生成器,用来创建使用 Ajax 技术的联系表单.提供 12 种不同的表单元素和客户端验证,提供不同的主题风格,可添加多个 Tab. 3.

jquery实现的图片延时加载插件

jquery实现的图片延时加载插件: 在很多网站尤其是图片站,都采用了图片延时加载效果,这样可以有效的减轻服务器的压力,有点自然不言而喻了,下面就和大家分享一个图片延时加载的插件,希望能够给大家带来一定的帮助. 代码如下: <script type="text/javascript"> (function( $ ){ $.fn.imglazyload=function( options ) { var o=$.extend({ attr:'lazy-src', contai

10 款优秀的文件管理插件推荐

本文整理了10款优秀的文件管理插件,这些插件基于jQuery.AJAX和PHP,你可以轻松进行定制并加入到自己的项目中.通过它们,你和用户可以通过浏览器来预览.上传.修改文件和文件夹. 1. elFinder 基于web的简单文件管理器. 源码 + 演示 2. jQuery File Tree 一个基于jQuery的.可配置的AJAX文件浏览插件.你最少只需一行JavaScript代码,即可创建一个自定义的.完全交互式的文件树. 源码 / 演示 3. jquery-filemanager 轻松管

tab 插件封装

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

幻灯片播放.图片轮播----非常优秀的swiper插件 http://www.idangero.us/sliders/swiper/index.php    插件主页 http://www.idangero.us/sliders/swiper/api.php        插件API http://www.idangero.us/sliders/swiper/demos.php   插件DEMO <!DOCTYPE html> <html> <head> <met

jQuery制作信息提示弹出层插件【推荐】

给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.?1. [代码][JavaScript]代码 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg

用bootstrap的tab插件做一个图层切换效果(感觉会误导淫们,大家当乐子看吧)

小伙伴们啊,我JS真的是个渣渣,所以总想要偷懒,于是为了实现效果就把tab插件给改了(各位大神轻拍啊,我是小白,很纯洁滴,小心脏也很脆弱)…… 最近做的项目为了考虑以后的移动设备兼容性,所以用了Bootstrap.首页有一个需要鼠标点击不一样的按钮固定位置图层内容变化的效果(我描述清楚了吗Orz……),如下图: 分别点击1,2,3,4按钮时现实对应的内容变化. 我就呵呵了,这个跟tab插件很类似啊~~不就是点按钮换图层吗.如果在别处找独立插件,我这记性的,项目js文件里早晚被我弄得乱七八糟我都不

推荐10款免费而优秀的图表插件

开发人员很多时候需要使用图表来表现一些数据,而一张图表往往能够比几行密密麻麻的数字表格更能直观地展示数据内容.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我在本篇文章中收集了10款免费开源且比较优秀的图表制作插件,以供各位参考. 1,ichartjs(国产) ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业于南昌大学