分享 发一个我女朋友写的 tab 插件 v0.1

shiren1118 · 2013年03月10日 · 最后由 shiren1118 回复于 2013年03月11日 · 2549 次阅读

代码位置:

https://github.com/i5ting/i5ting-jquery-tab

界面如下:

此界面模仿的是iciba.com的tab样式

特性

  • jquery插件,支持配置
  • 显示隐藏按钮,可配置

用法

固定高度显示

$('.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'
});

固定高度显示

$('.wrap1').i5ting_jquery_tab({
    fix_height :'200px'
});

隐藏tab正文区域的按钮

$('.wrap2').i5ting_jquery_tab({
    is_tab_content_btn_show:false
});

配置项说明

  • 是否固定显示高度
fix_height :'200px'

如果配置了fix_height属性,则tab将以此高度,固定显示高度。

默认是自动适应高度的。

  • 是否显示tab正文区域是否隐藏按钮
is_tab_content_btn_show :fase

如果配置了is_tab_content_btn_show=false属性,则tab不显示隐藏tab正文区域的按钮。

默认:is_tab_content_btn_show=true

  • 增加event_trigger_type

/*现在支持2种类型: click | hover */

  • 设置current_tab_index(说明:此设置是把tab_content设置为对应选中,不修改li的原因是,不预制li class=current会导致进入刷新,会闪屏幕的)
<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>

Release History

(Nothing yet)

v0.1 source

  • 是否固定显示高度
  • 是否显示tab正文区域是否隐藏按钮
  • 给最后一个li增加last这个css样式
  • 增加event_trigger_type:'click', /*现在支持2种类型: click | hover */
  • 设置current_tab_index(说明:此设置是把tab_content设置为对应选中,不修改li的原因是,不预制li class=current会导致进入刷新,会闪屏幕的)

欢迎批评反馈

共收到 13 条回复

小建议:JavaScript 的命名惯例是 camelCase 而不是 under_score。:)

#1楼 @fredwu 嗯,你说的是对的,以前习惯驼峰式,现在不喜欢了,哈哈

是论坛里的 @i5ting 么?

支持一下女猿

我好邪恶,jq理解错了……

楼主主要的目的是在“我女朋友的”这五个字上

赤裸裸的show幸福生活啊

被“女朋友”三个字吸引进来的……吐槽下插件名,这确实是个忘不了女朋友的好方式,每天用插件都要默写一遍……

有更新。release了v0.1版本

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册