13.jQuery UI 选项卡UI

最新推荐文章于 2020-11-07 14:17:38 发布

初心始终钰

最新推荐文章于 2020-11-07 14:17:38 发布

阅读量2.5k

点赞数

分类专栏： jQuery UI

本文链接：https://blog.csdn.net/qq_16430735/article/details/38471915

版权

jQuery UI 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

选项卡（tab），是一种能提供给用户在同一个页面切换不同内容的UI。尤其是在页面布

局紧凑的页面上，提供了非常好的用户体验。

一．使用tabs

html :

<div id="tabs">

   <ul>

      <li><a href="#tabs1">tab1</a></li>
      <li><a href="#tabs2">tab2</a></li>
      <li><a href="#tabs3">tab3</a></li>

   </ul>

<div id="tabs1">tab1-content</div>

<div id="tabs2">tab2-content</div>

<div id="tabs3">tab3-content</div>

</div>

jQuery :

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

二．修改tabs 样式

在弹出的tabs 对话框中，在火狐浏览器中打开Firebug 或者右击->查看元素。这样，

可以看看tabs 的样式，根据样式进行修改。为了和网站主题符合，对tabs 的标题背景进行

修改。

//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {

   background:url(../img/xxx.png);

}

//去掉外边框
#tabs {

   border:none;

}

//内容区域修饰
#tabs1, #tabs2, #tabs3 {

   height:100px;

   padding:10px;

   border:1px solid #aaa;

   border-top:none;

   position:relative;

   top:-2px;

}

三．tabs()方法的属性

选项卡方法有两种形式：1.tabs(options)，options 是以对象键值对的形式传参，

每个键值对表示一个选项；2.tabs('action', param)，action 是操作选项卡方法的

字符串，param 则是options 的某个选项。

tabs 外观选项
属性	默认值/类型	说明
collapsible	false/布尔值	当设置为true 是，允许选项卡折叠对应的内容。默认值为false，不会关闭对应内容
disabled	无/数组	使用数组来指定禁用哪个选项卡的索引，比如： [0,1]来禁用前两个选项卡
event	click/字符串	触发tab 的事件类型，默认为click。可以设置 mouseover 等其他鼠标事件
active	数组和布尔值	如果是数组，初始化时默认显示哪个tab，默认值为0。如果是布尔值，那么默认是否折叠。条件必须是collapsible 值为true
heightStyle	content/字符串	默认为content，即根据内容伸展高度。Auto 则自动根据最高的那个为基准，fill 则是填充一定的可用高度
show	false 布尔值	切换选项卡时，默认采用淡入效果
hide	false 布尔值	切换选项卡时，默认采用淡出效果

$('#tabs').tabs({

   collapsible : true,

   disabled : [0],

   event : 'mouseover',

   active : false,

   heightStyle : 'content',

   hide : true,

   show : true,

});

注意：设置true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串

参数。

show 和hide 可选特效
特效名称	说明
blind	对话框从顶部显示或消失
bounce	对话框断断续续地显示或消失，垂直运动
clip	对话框从中心垂直地显示或消失
slide	对话框从左边显示或消失
drop	对话框从左边显示或消失，有透明度变化
fold	对话框从左上角显示或消失
highlight	对话框显示或消失，伴随着透明度和背景色的变化
puff	对话框从中心开始缩放。显示时“收缩”，消失时“生长”
scale	对话框从中心开始缩放。显示时“生长”，消失时“收缩”
pulsate	对话框以闪烁形式显示或消失

四．tabs()方法的事件

除了属性设置外，tabs()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回

调函数。

tab 事件选项
事件名	说明
create	当创建一个选项卡时激活此事件。该方法有两个参数 (event, ui)，ui 参数有两个子属性tab 和panel，得到当前活动卡和内容选项的对象
activate	当切换一个活动卡时，启动此事件。该方法有两个参数 (event, ui)，ui 参数有四个子属性newTab、newPanel、 oldTab，oldPanel。分别得到的时候新tab 对象、新内容对象、旧tab 对象和旧内容对象
beforeActivate	当切换一个活动卡之前，启动此事件。该方法有两个参数(event, ui)，ui 参数有四个子属性newTab、newPanel、 oldTab，oldPanel。分别得到的时候新tab 对象、新内容对象、旧tab 对象和旧内容对象
load	当ajax 加载一个文档后激活此事件。该方法有两个参数 (event, ui)，ui 参数有两个子属性tab 和panel，得到当前活动卡和内容选项的对象
beforeLoad	当ajax 加载一个文档前激活此事件。该方法有两个参数 (event, ui)，ui 参数有四个子属性tab 和panel 以及jqXHR 和ajaxSettings，前两个得到当前活动卡和内容选项的对象，后两个是ajax 操作对象

//当选项卡创建时触发
$('#tabs').tabs({

   create : function (event, ui) {

      alert($(ui.tab.get()).html());

      alert($(ui.panel.get()).html());

   },
});

//当切换到一个活动卡时触发
$('#tabs').tabs({

   activate : function (event, ui) {

      alert($(ui.oldTab.get()).html());

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

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

      alert($(ui.newPanel.get()).html());

   },

});

//当切换到一个活动卡之前触发
$('#tabs').tabs({

   beforeActivate : function (event, ui) {

      alert($(ui.oldTab.get()).html());

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

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

      alert($(ui.newPanel.get()).html());

   },

});

ajax 调用的基本方法

html :

<ul>

   <li><a href="tabs1.html">tab1</a></li>
   <li><a href="tabs2.html">tab2</a></li>
   <li><a href="tabs3.html">tab3</a></li>

</ul>

而tabs1.html、tabs2.html 和tabs3.html 只要书写即可，无须包含<div>。比如：

tabs1-content

//ajax 加载后触发
$('#tabs').tabs({

   load : function (event, ui) {

      alert('ajax 加载后触发！');

   }

});

//ajax 加载前触发
$('#tabs').tabs({

   beforeLoad : function (event, ui) {

      ui.ajaxSettings.url = 'tabs2.html';

      ui.jqXHR.success(function (responseText) {

         alert(responseText);

      });

   }

});

tabs('action', param)方法
方法	返回值	说明
tabs('disable')	jQuery 对象	禁用选项卡
tabs('enable')	jQuery 对象	启用选项卡
tabs('load')	jQuery 对象	通过ajax 获取选项卡内容
tabs('widget')	jQuery 对象	获取选项卡的jQuery 对象
tabs('destroy')	jQuery 对象	删除选项卡，直接阻断了tabs
tabs('refresh')	jQuery 对象	更新选项卡，比如高度
tabs('option', param)	一般值	获取options 属性的值
tabs('option', param, value)	jQuery 对象	设置options 属性的值

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

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

//获取选项卡jQuery 对象
$('#tabs').tabs('widget');

//更新选项卡
$('#tabs').tabs('refresh');

//删除tabs 选项卡
$('#tabs').tabs('destroy');

//重载指定选项卡内容
$('#button').click(function () {

   $('#tabs').tabs('load', 0);

});

//得到tabs 的options 值
alert($('#tabs').tabs('option', 'active'));

//设置tabs 的options 值
$('#tabs').tabs('option', 'active', 1);

五．tabs 中使用on()

在tabs 的事件中，提供了使用on()方法处理的事件方法。

on()方法触发的选项卡事件
特效名称	说明
tabsload	Ajax 加载后触发
tabsbeforeload	Ajax 加载前触发
tabsactivate	选项卡切换时触发
tabsbeforeactivate	选项卡切换前触发

//ajax 加载后触发
$('#tabs').on('tabsload', function () {

   alert('ajax 加载后触发！');

});

//ajax 加载前触发
$('#tabs').on('tabsbeforeload', function () {

   alert('ajax 加载前触发！');

});

//选项卡切换时触发
$('#tabs').on('tabsactivate', function () {

   alert('选项卡切换时触发！');

});

//选项卡切换前触发
$('#tabs').on('tabsbeforeactivate ', function () {

    alert('选项卡切换前触发！');

});