tab选项卡

选项卡：是一种能提供给用户在同一个页面切换不同内容的ui。尤其是在页面布局紧凑的页面上。

1. 使用table

$('#tabs').tabs();

1. tabs外观选项和方法

HTML文件：

<divid="tabs">

<ul>

<li><ahref="#tab1">tab1</a></li><!--当点击此按钮是，显示tab_content1内容，采用方式为#加上一个内容的id -->

<li><ahref="#tab2">tab2</a></li>

<li><ahref="#tab3">tab3</a></li>

</ul>

<divid="tab1"><p>tab-content1</p><p>tab-content1</p><p>tab-content1</p></div>

<divid="tab2">tab-content2</div>

<divid="tab3">tab-content3</div>

</div>

 

JS文件：

$(function(){

  $('#tabs').tabs({

     collapsible:true,//允许折叠，false不允许折叠

     disabled:[0], //选项卡禁用，true时，全部禁用

     event:mouseover,//原来为点击才可以切换，当为mouse时，鼠标滑过也可以切换

      active:1,//默认展开第几个tab，当为false时，默认折叠

      heightStyle:"auto",//默认值为content，根据内容的高度对话框的高度变化；当为auto时，所有对话框会以最高的为标准；当值为fill时，可以填充一定高度

      show:true,//淡入淡出效果

      hide:true//淡入淡出效果

  });

});

CSS文件：

#tabs{

  margin:200px;

  border:0;

}

#tab1,#tab2,#tab3{

  border:1pxsolid#aaa;

  border-top:none;

  position:relative;

  top:-2px;}

1. 选项的事件

   $('#tabs').tabs({

         create:function(event,ui){

        //alert('创建tab时触发');

     //alert($(ui.tab.get()).html());//ui有两个子属性tab和panel，得到当前活动卡和内容选项的对象

      },

      activate:function(event,ui){

//alert("change");//切换之后触发,启动该事件      //alert($(ui.oldTab.get()).html());

        //alert($(ui.newTab.get()).html());

        //alert($(ui.oldPanel.get()).html());

        //alert($(ui.newPanel.get()).html());    },

      beforeActivate:function(){

        //切换活动卡之前启动该事件

        alert("change");

      },

  });

1. ajax远程加载

   index.html

<divid="tabs">

<ul>

<li><ahref="tab1.html">tab1</a></li><!--当点击此按钮是，显示tab_content1内容，采用方式为#加上一个内容的id -->

<li><ahref="tab2.html">tab2</a></li>

<li><ahref="tab3.html">tab3</a></li>

</ul>

</div>

tab1.html:

tab1-content

tab2.html:

tab2-content

js文件代码不变 同上

远程加载的两个事件：load（）和beforeLoad（）

$('#tabs').tabs({

     collapsible:true,//允许折叠，false不允许折叠

     load:function(event,ui){

        //加载一个文档后激活此事件,有两个子属性，tab和panel

        alert("after ajax");

     },

      beforeLoad:function(event,ui){

        //ajax加载一个文档之前激活

        //有四个子属性：tab、panel、jqXHR（得到ajax属性）、ajaxSettings

        alert("before");

        ui.jqXHR.success(function(responseText){

           alert(responseText);

        });

        ui.ajaxSettings.url='tab2.html';//设置一些默认属性，单击每一个选项卡显示的都是tab2.html内容

      }

  });

1. tabs(‘action’,param)方法

$('#tabs').tabs('disable');//禁用选项卡所有选项

  $('#tabs').tabs('disable',0);//禁用第一个选项卡

  $('#tabs').tabs('enable',0);//启用第一个选项卡

  $('#tabs').tabs('enable');//启用所有选项卡

  $('#button').click(function(){

  $('#tabs').tabs('load',0);//表示更新第一个选项卡,可以进行局部刷新

  });