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

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

代码位置:

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 会导致进入刷新,会闪屏幕的)

欢迎批评反馈

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

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

是论坛里的 @i5ting 么?

支持一下女猿

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

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

赤裸裸的 show 幸福生活啊

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

有更新。release 了 v0.1 版本

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