现在位置首页 / 生活多美好 /正文

扁平化样式系列--Jquery 轻量级Tab切换效果插件使用说明

作者: IT小兵 | 2013年8月29日| 热度:℃ | 评论: |参与:

继上一篇 扁平化样式系列--Jquery多级菜单插件Slimmenu使用说明  之后,今天跟大家分享jquery 轻量级Tab插件-tabulous.js。

Tabulous.js 介绍

Tabulous.js 是一个简单易用的轻量级 jQuery Tab 切换插件,它没有额外花哨的功能,只是菜单切换,

当然支持在 Tab 内容中添加任意 HTML 内容,它还有四种切换效果(slide, scale, scale up 和 flip)供你选择。

项目开源地址:http://git.aaronlumsden.com/tabulous.js/


无图无真相:


jquery 扁平化Tab

Tabulous.js 简单使用

Tabulous.js 这个Tab 切换 jQuery 插件的使用和其他插件的使用一样,首先要加载一个 jQuery 库,然后是 Tabulous.js 自己的库和样式文件。

 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href='tabulous.css' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>
<script type="text/javascript" src="js.js"></script>

然后创建 Tab 菜单和内容:

		<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">
			    <p>第一个tab页面.</p>
		</div>
		<div id="tabs-2">
			    <p>第2个tab页面</p>
		</div>
		<div id="tabs-3">
			  第3个tab页面.可以使用html元素
		</div>
		</div><!--End tabs container-->
	</div><!--End tabs-->

最后启用插件:

 

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


扁平化样式下载地址:http://pan.baidu.com/share/link?shareid=2152884773&uk=1765114824


转发请注明来自:IT分享 http://suchso.com

点击阅读本文所属分类的更多文章: 生活多美好 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询