jQuery封装的tab选项卡插件分享

jQuery 2018-12-31

在网站开发中经常会用到选项卡功能，为了节省一下写代码时间，封装了一下tab插件，方便调用。

创建选项卡组件

使用方法： html结构

rush:xhtml;">

    • js调用

    rush:js;"> $('#tab').tabs();

    相关参数说明:

    参数默认值参数说明 activenull设置被选中的选项卡的索引，默认值为null，例如设置选中第一个选项卡则设置为0 eventclick选项卡的切换事件，默认为点击事件，可以设置mouSEOver

    添加选项卡参数

    参数默认值参数说明 title空选项卡显示的文本，默认为空 href空选项卡链接，如果为静态数据则填入对应的字符串(#str),远程数据则为对应的url content空选项卡为静态数据时的内容，动态数据则无需填写 iconClstrue选项卡关闭按钮，默认为显示true,不显示则为false

    Demo:

    例子1： 静态数据：

    rush:xhtml;">

    • js调用：

    rush:js;"> $('#tabs').tabs();

    例子2： 通过远程数据加载页面,则动态创建panel,

    rush:xhtml;">

    js调用：

    rush:js;"> $('#tabs').tabs();

    例子3： 传入参数，设置选项卡切换事件为mouSEOver

    rush:xhtml;">

    js调用：

    rush:js;"> $('#tabs').tabs({event:'mouSEOver'});

    例子4： 添加选项卡:

    rush:xhtml;"> 添加选项卡" onclick="addTab()">

    <div id="tabs">

    js调用：

    总结:

    通过不同的Id调用，就可以创建不同的tab结构，样式则通过id来自定义不同的样式即可。

    小弟不才.欢迎各位大神指教....

    Demo下载地址：

    以上所述就是本文的全部内容了，希望大家能够喜欢。

    jQuerytab选项卡

    相关文章

    jquery页面搜索关键词突出显示
    页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
    jQuery实时显示日期、时间
    jQuery实时显示日期、时间 html: &lt;span id=&quot...
    jQuery 添加水印
    jQuery 添加水印 &lt;script src=&quot;../../../.....
    Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
    中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
    Asp.net 后台调用js方法
    1. 用Response.Write方法 代码如下： Response.Write(&q...
    Jquery实现按钮点击遮罩加载，处理完后恢复
    Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...