明度插件单元免费素材下载 Tabs

资源魔 19 0
比来发现不少冤家找我要各类剧本或许插件。我颇为嬉笑他们为毛没有本人写的同时,也反思了一下。我是否是该整顿整顿本人罕用的成果,编写几个插件了?
于是,Amas的插件就降生了。我叫它un。。。。Amas's Jquery 若何?额,先没有定名吧仍是。。。
这篇文章分享分享我的童贞作插件——jquery.AmasTabs.js
起首,它无能嘛?如题,Tabs的选项卡成果。
其次,若何应用?请看下文。
=========html中的挪用代码=========
[code]
<script src="https://www.jb51.net/js/Jquery-Extend/jquery.1.7.2.min.js"></script> //当然,你版本高点无所谓。
<script src="https://www.jb51.net/js/ Jquery-Extend/Tabs/jquery.tabs.js"></script>
[/code]
=========必需加载的款式支持=========
[code]
<link href=”https://www.jb51.net/js/Jquery-Extend/Tabs/tabs.css” rel="stylesheet" type="text/css" />
[/code]
=========Html中的Dom规范=========
[code]
<div id="tabs1">
<div class="tabs-title">
<div class="tabs-lbg"></div>
<ul class="tabs-list">
<li class="tabs-option">
<span class="tabs-option-lbg"></span>
<span class="tabs-option-text">题目1</span>
<span class="tabs-option-rbg"></span>
</li>
<li class="tabs-option">
<span class="tabs-option-lbg"></span>
<span class="tabs-option-text">题目2</span>
<span class="tabs-option-rbg"></span>
</li>
<li class="tabs-option">
<span class="tabs-option-lbg"></span>
<span class="tabs-option-text">题目3</span>
<span class="tabs-option-rbg"></span>
</li>
</ul>
<div class="tabs-rbg"></div>
<div class="clear"></div>
</div>
<div class="tabs-box">
<div class="fatbox">
<div class="tabs-content">内容1</div>
<div class="tabs-content">内容2</div>
<div class="tabs-content">内容3</div>
<div class="clear"></div>
</div>
</div>
</div>
[/code]
=========把如下代码放到 #tabs1同级的上面=========
[code]
<script type="text/javascript">
$("#tabs1").tabs();
</script>
[/code]
========== 参 数 ==========
[code]
*参数:{
_event:1 //1为鼠标点击切换,其余数字视为鼠标通过 *没有支持小数
Index:0 //默许显示的tab,0为第一张,最年夜为详细应用的title个数-1
animateSpeed: //动画继续工夫,单元为毫秒。默许为500
tabWidth: //模块宽度,默许为500,单元为PX
tabHeight: //模块高度,默许为200,单元为PX
listHeight: //title模块的高度,默许为37, 单元为PX
//如下最多只可提供一个为true
opacity: //使用通明度切换过渡。默许为false,如规则为true则按通明度切换
xScroll:false, //使用横向滚动过渡。默许为false,如规则为true则按横向滚动切换
yScroll:false //使用纵向滚动过渡。默许为false,如规则为true则按纵向滚动切换

[/code]
嗯哪,就这些。。置信聪慧的你一定看完就会用了吧?

标签: Tabs

抱歉,评论功能暂时关闭!