a copy of iciba.com tab implement
Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="dist/i5ting-jquery-tab.min.js"></script>
<script>
jQuery(function($) {
$('.wrap').i5ting_jquery_tab();//tab
});
</script>
<div class="wrap">
<br/>
<div class='i5ting_tab_list'>
<ul>
<li class="current">
<a href="#">张婷作品</a>
</li>
<li>
<a href="#">jquery - tab</a>
</li>
<li>
<a href="#">大学</a>
</li>
<li>
<a href="#">童年</a>
</li>
<li class="last">
<a href="#">在人间</a>
</li>
</ul>
</div>
<div class="i5ting_tab_content">
<div class="i5ting_tab_content_item current_content">
1.This is the news part. We will give you the latest news around the world on pretty hearts and the beautiful scenry.
</div>
<div class="i5ting_tab_content_item">
2.<p>The skill part.</p>
<p>The skill part.</p>
</div>
<div class="i5ting_tab_content_item">
3.We have a large number of art works. We are so famous and popular that many people come here to watch our show from far distance.
</div>
<div class="i5ting_tab_content_item">
4.A great team is very important to create a brilliant career. We are not alone ,we are a team, we can share all the dificulies.
</div>
<div class="i5ting_tab_content_item">
5.If you have any question about us or our works please leave a message, we will repond at once.
</div>
</div>
</div>
(Coming soon)
固定高度显示
$('.wrap1').i5ting_jquery_tab({
fix_height :'200px'
});
隐藏tab正文区域的按钮
$('.wrap2').i5ting_jquery_tab({
is_tab_content_btn_show:false
});
使用hover事件触发
$('.wrap2').i5ting_jquery_tab({
is_tab_content_btn_show:false,
current_tab_index: 2,
event_trigger_type:'hover'
});
fix_height :'200px'
如果配置了fix_height属性,则tab将以此高度,固定显示高度。
默认是自动适应高度的。
is_tab_content_btn_show :fase
如果配置了is_tab_content_btn_show=false属性,则tab不显示隐藏tab正文区域的按钮。
默认:is_tab_content_btn_show=true
/*现在支持2种类型: click | hover */
<div class='i5ting_tab_list'>
<ul>
<li >
<a href="#">tab说明</a>
</li>
<li>
<a href="#">特性</a>
</li>
<li class="current">
<a href="#">开源协议</a>
</li>
<li>
<a href="#">源码</a>
</li>
<li>
<a href="#">张婷作品</a>
</li>
</ul>
</div>
自己修改current的border-top即可
.i5ting_tab_header li.current{
background:#fff;
/* iciba #2f82df;*/
/* github #d26911;*/
border-top:2px solid #d26911;
padding-top:1px;
height:32px;
margin-top:0;
font-weight:bold;
}
see example dir.
@see index.html
v0.1
<div class='i5ting_tab_list'>
<ul>
<li >
<a href="#">tab说明</a>
</li>
<li>
<a href="#">特性</a>
</li>
<li class="current">
<a href="#">开源协议</a>
</li>
<li>
<a href="#">源码</a>
</li>
<li>
<a href="#">张婷作品</a>
</li>
</ul>
</div>
v0.2 -增加li的背景扩展demo
http://www.keakon.net/2011/08/03/优化UITableView性能 http://rd.189works.com/article-103536-1.html