jQuery-ui tab选项卡

最新推荐文章于 2023-07-12 19:00:24 发布

kxkkk

最新推荐文章于 2023-07-12 19:00:24 发布

阅读量1.5k

点赞数

分类专栏：前端

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet"
        href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs({
                //配置当前打开的选项卡的索引，可以使用bool值或者int值，默认为1
                //bool值仅当collapsible属性为true时可以使用，表示默认选项卡为折叠状态
                //如果是int值，表示当前打开的选项卡的索引，如果是负数将从最后的选项卡开始索引
                active : true,
                //配置选项卡是否可以折叠，默认是false
                collapsible : false,
                //禁用选项卡，可以使用bool值或者int数组，但是用了感觉没效果啊，因为是disabled，不是disable，fuck
                disabled : false,
                //激活选项卡的方式，默认为click
                //"mouseover"表示鼠标移动到标题上即激活选项卡
                //"click"表示鼠标点击激活选项卡
                event : "click",
                //设置选项卡高度，可以配置为"auto","fill","content"，默认为"content"
                //"auto"表示选项卡高度将被设置成最高的那个选项卡的高度
                //"fill"表示扩展到基于选项卡的父容器的可用高度
                //"content"表示每个选项卡将以自身内容为高度
                heightStyle : "content",
                //设置选项卡隐藏的方式,可以设置bool值，number值，String值或者Object，默认值为null
                //bool值表示是否有隐藏特效，如果为true，将以默认的时间和动画淡出选项卡
                //number值表示选项卡将以指定的时间（单位毫秒）和默认动画淡出。
                //String值表示选项卡将以指定的动画效果隐藏，动画时间为默认值
                //Object值表示可以配置动画的类型和动画时间以及动画的延迟时间,effect,delay,duration,easing
                hide : "hide",
                //设置选项卡显示的方式，参数和hide相同
                show : "show",
                //设置选项卡激活之后的回调方法，即点击另外一个选项卡在show动画完成之后执行的方法
                //传入的ui对象有四个属性，他们都是Jquery对象
                //一个是newTab，代表新的选项卡，
                //一个是newPanel，代表新的选项卡的面板
                //一个是oldTab，代表旧的选项卡
                //一个是oldPanel，代表旧的选项卡的面板
                //也可以使用绑定的方式将该事件绑定到选项卡上:$("#tabs").on("tabsactivate",function(event,ui){});
                activate : function(event, ui) {
                   // alert("选项卡已激活");
                },
                //设置选项卡即将激活的回调方法，可以阻止选项卡激活，传入的参数和activate事件相同，也可以使用绑定的方式将该事件绑定到选项卡上
                beforeActivate : function(event, ui) {
                  // alert("选项卡即将激活");
                },
                //设置选项卡内容加载之前的回调方法，只有使用ajax加载内容的选项卡即将激活之后才会触发该事件
                //传入的ui对象中有四个属性
                //一个是tab，即将被加载的选项卡
                //一个是panel，即将被加载的选项卡面板
                //一个是jqXHR，发送请求的jquery封装的XMLHttpRequest对象
                //一个是ajaxSettings，ajax请求的配置属性
                beforeLoad : function(event, ui) {
                 //   alert("选项卡内容即将加载");
                }
            });
            $("#destroy").button().click(function() {
                $("#tabs").tabs("destroy");//销毁选项卡方法,会将选项卡变成普通的html标签
            });
            $("#disableAll").button().click(function() {
                $("#tabs").tabs("disable");//禁用所有选项卡方法
            });
            $("#disable1").button().click(function() {
                $("#tabs").tabs("disable", 0);//禁用某个选项卡方法
            });
            $("#enableAll").button().click(function() {
                $("#tabs").tabs("enable");//禁用某个选项卡方法
            });
            $("#enable1").button().click(function() {
                $("#tabs").tabs("enable", 0);//禁用某个选项卡方法
            });
            $("#load1").button().click(function() {
                $("#tabs").tabs("load", 0);//重新加载某个选项卡方法，应该与ajax加载同时使用
            });
            $("#isDisabled").button().click(function() {
                var disabled = $("#tabs").tabs("option", "disabled");//获取选项卡disabled属性值
             //   alert(disabled);
            });
            $("#show").button().click(function() {
                var show = $("#tabs").tabs("option", "show");//获取选项卡show属性值
             //   alert(show);
            });
            $("#option").button().click(function() {
                var option = $("#tabs").tabs("option");//获取选项卡所有配置项
                var props = "";
                for ( var p in option) {
                    props += p + " = " + option[p] + "\n";
                }
            //    alert(props);
            });
            $("#setActive0").button().click(function() {
                $("#tabs").tabs("option", "active", 0);//设置选项卡active属性值为0
            });
            $("#setMulti").button().click(function() {
                $("#tabs").tabs("option", {
                    show : false,
                    hide : false
                });//设置选项卡多个属性值
            });
            $("#reFresh").button().click(function() {
                $("#tabs").tabs("refresh");//刷新选项卡,效果不详，还有待考证
            });
            $("#sortTabs").button().click(function() {
                var tabs = $("#tabs");
                tabs.find(".ui-tabs-nav").sortable({
                    axis:"x",
                    stop:function(){
                        tabs.tabs("refresh");
                    }
                });
            });
        });
    </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tab1"><span>tab1</span></a></li>
                <li><a href="#tab2"><span>tab2</span></a></li>
                <li><a href="content.html"><span>ajax加载</span></a></li>
                <li><a href="#tab4"><span>tab4</span></a></li>
            </ul>
            <div id="tab1">
                <p>第一个tab页面</p>
            </div>
            <div id="tab2">
                <p>第二个tab页面</p>
            </div>
            <div id="tab4">
                <p>第四个tab页面</p>
                <p>第四个tab页面</p>
                <p>第四个tab页面</p>
            </div>
        </div>
        <button id="destroy">销毁选项卡</button>
        <button id="disableAll">禁用所有选项卡</button>
        <button id="disable1">禁用第一个选项卡</button>
        <button id="enableAll">启用所有选项卡</button>
        <button id="enable1">启用第一个选项卡</button>
        <button id="load1">加载第一个选项卡</button>
        <button id="isDisabled">获取选项卡是否禁用状态</button>
        <button id="show">获取选项卡显示动画</button>
        <button id="option">获取选项卡所有配置信息</button>
        <button id="setActive0">激活第一个选项卡</button>
        <button id="setMulti">设置选项卡多个配置项</button>
        <button id="reFresh">刷新选项卡</button>
        <button id="sortTabs">使选项卡标题可移动</button>
    </body>
    </html>