欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > TAB选项卡

myFocus Tab - 很不错的tab切换选项卡js插件

所属栏目:TAB选项卡更新时间:2014-08-15原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


myFocus tab是一款非常棒的TAB选项卡切换效果代码。功能丰富。

特点:

支持无限嵌套、支持点击切换/悬停切换/自动切换、自定义风格、切换效果(无效果/淡入效果/滑动效果)

myFocus-tab的HTML结构

<div id="yourTabID">
    <div class="loading"><span>请稍候...</span></div><!--载入画面-->
    <ul class="btn"><!--标题-->
        <li>标题1</li>
        <li>标题2</li>
        <li>标题3</li>
        <li>标题4</li>
    </ul>
    <ul class="cont"><!--内容-->
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>
</div>

myFocus-tab的调用和参数设置:

myFocus.setting({
    style:'mF_tab',//风格样式(对这款tag来说这是固定的)
    id:'yourTabID',//绑定ID
    trigger:'click',//tab切换模式:'click'(点击切换)/'mouseover'(悬停切换,这模式下默认有100毫秒延迟)
    type:'slide',//切换效果:'none'(无效果)/'fade'(淡入效果)/'slide'(滑动效果)
    auto:false,//是否自动切换,true为自动,false为非自动
    time:2,//自动切换模式下的切换时间间隔,单位秒
    width:424,//宽(内容区),单位像素
    height:61//高(内容区),单位像素,支持'auto'自适应设置
});

* 高级参数:其中有隐藏参数delay(mouseover模式中的延迟)、index(开始时显示tab序号,默认是0,即显示第一个tab),可自行添加设置

* 高级嵌套:由于IE和其他浏览器的JS引擎解释顺序不同(很蛋疼),如果用到tag嵌套则需要按顺序调用,上面demo已有具体例子,可参考使用,但注意一定要把嵌套tag调用放在其他非嵌套tag调用之前,否则在IE中无效!


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 1 没帮助 1
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1myFocus Tab - 很不错的tab切换选项卡js插件

2jQuery选项卡TAB插件-点击/滑过切换-同页面重复使用

3jquery多层选项卡切换代码

4tab选项卡和图片滚动结合使用的jquery代码

5带手风琴效果的TAB选项卡jquery代码

7扩展性好的精简自动切换的TAB标签/TAP选项卡

8JQuery选项卡缓动滚动导航菜单位置代码

9SlideToggle导航纯手打

10jQuery仿百度首页滑动选项卡代码

最新更新的

1仿雅虎首页网站快捷入口TAB代码

2jQuery仿腾讯游戏官网首页小幻灯片

3SlideToggle导航纯手打

4jQuery仿百度首页滑动选项卡代码

5jQuery长文本分页插件textify

7适合新闻首页的轮播

9仿淘宝可重复使用的JS TAB标签选项卡代码

10带手风琴效果的TAB选项卡jquery代码