最新消息:

第2款插件:tabBox.js可以非常简单方便地制作选项卡

选项卡 杨红伟 1453浏览 0评论

描述:jQuery Tab 是 jQuery 的插件。它具有垂直滚动,水平滚动 ,点击触发,划过触发和自动切换等效果。
图片展示:

2

兼容浏览器: IE6+/Firefox/Google Chrome
官方链接: 暂无
JS下载:http://www.ijquery.cn/js/tabBox.js
预览: http://www.ijquery.cn/demo/tabBox
打包下载: http://www.ijquery.cn/demo/tabBox/tabBox.zip
参数说明:

tabId:切换的标签父级容器
tabTag:切换的具体标签
conId:切换的内容父级容器
conTag:切换的具体内容容器
act:事件(click为鼠标点击,mouseover为鼠标经过)
effact:具体内容切换效果(scrolly为垂直滚动或者是上下滚动,scrollx为水平滚动或者左右滚动,slow为缓动效果,为空则无效果即为普通切换)
auto:是否自动切换(true 为自动  false不自动切换)
dft:设置起始显示序列从0开始数

JS代码:

<script type=”text/javascript” src=”http://www.ijquery.cn/js/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”http://www.ijquery.cn/js/tabBox.js” ></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#testtab”).tab({
tabId:”#tabtag”,    // 切换控制器的 ID
tabTag:”li”,        // 切换控制器标签
conId:”#tabcon”,    // 内容容器 ID
conTag:”.tabcon”    // 容器标签
//auto:true,        // 自动切换
//act:”click”,      // 点击触发 也可以不设置 默认就为 click 设置为 mouseover 则为鼠标划过
//effact:”scrolly”, // 效果为纵向滚动,横向滚动效果为 scrollx
//dft:0,            // 设置起始显示序列
//effact:”slow”     // “slow” 效果
})
})
</script>

HTML代码:

<div id=”testtab” >

<div id=”tabtag”>
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</div>
<div id=”tabcon” >
<div>
<ul>
<li><a href=”#”>内容一</a></li>
</ul>
</div>
<div>
<ul>
<li><a href=”#”>内容二</a></li>
</ul>
</div>
<div>
<ul>
<li><a href=”#”>内容三</a></li>
</ul>
</div>
</div>
</div>

CSS代码:

.testtab{ border:4px solid #ccc; width:500px;height:400px;}

.tabtag{ line-height:24px; height:24px; border-bottom:2px solid #ccc;}
.tabtag li{ float:left; width:24%; text-align:center; background:#eee;}
.tabtag li.cur{ color:#900; background:#fff;}
.tabcon{ height:100px; overflow:hidden;}
.tabcon div{ height:80px; padding:10px; color:#900; font-size:14px;}
.tabcon li{ line-height:22px;}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址