[关闭]
@liayun 2016-05-11T08:58:44.000000Z 字数 5007 阅读 2082

知问前端--选项卡UI

知问前端


选项卡(tab),是一种能提供给用户在同一个页面切换不同内容的UI。尤其是在页面布局紧凑的页面上,提供了非常好的用户体验。

一、使用tabs

使用tabs比较简单,但需要按照指定的规范即可。如:

  1. <div id="tabs">
  2. <ul>
  3. <li><a href="#tab1">tab1</a></li>
  4. <li><a href="#tab2">tab2</a></li>
  5. <li><a href="#tab3">tab3</a></li>
  6. </ul>
  7. <div id="tab1">tab1-content</div>
  8. <div id="tab2">tab2-content</div>
  9. <div id="tab3">tab3-content</div>
  10. </div>

怎样使用呢?jQuery代码:

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

二、修改tabs样式

在弹出的tabs对话框中,在火狐浏览器中打开Firebug或者右击->查看元素。这样,我们可以看看tabs的样式,根据样式进行修改。我们为了和网站主题符合,对tabs的标题背景进行修改。
修改选项卡的header的背景:

  1. //无须修改ui里的CSS,直接用style.css替代掉
  2. .ui-widget-header {
  3. background: url(img/ui_header_bg.png);
  4. }

去掉外边框,并调整位置:

  1. #tabs {
  2. margin: 200px;
  3. border: none;
  4. }

各个选项卡内容区域的修饰:

  1. #tab1,#tab2,#tab3 {
  2. border: 1px solid #ccc;
  3. border-top: none;
  4. position: relative;
  5. top: -2px;
  6. }

三、tabs()方法的属性

选项卡的方法有两种形式:

  1. tabs(options),options是以对象键值对的形式传参,每个键值对表示一个选项;
  2. tabs('action', param),action是操作选项卡方法的字符串,param则是options的某个选项。

tabs外观选项

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

**注意:**show和hide设置为true后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字符串参数。

show和hide可选特效

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

jQuery测试代码:

  1. $('#tabs').tabs({
  2. collapsible : true,
  3. disabled : [0,1],
  4. //disabled : true,
  5. event : "mouseover", //鼠标悬浮过去触发
  6. //active : 1,
  7. active : false,
  8. heightStyle : "content",
  9. //heightStyle : "auto",
  10. //heightStyle : "fill",
  11. show : true,
  12. hide : true
  13. });

四、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操作对象。

jQuery测试createactivatebeforeActivate事件代码:

  1. $('#tabs').tabs({
  2. create : function(event,ui) {
  3. //alert("创建tab时触发!");
  4. //alert(ui.tab); //[object Object]
  5. //alert(ui.tab.get()); //[object HTMLLIElement]
  6. alert($(ui.tab.get()).html()); //<a id="ui-id-5" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#tab1">tab1</a>
  7. alert($(ui.panel.get()).html()); //tab1-content
  8. },
  9. activate : function(event,ui) {
  10. alert("切换到另一个活动卡后触发!");
  11. alert($(ui.oldTab.get()).html());
  12. alert($(ui.newTab.get()).html());
  13. alert($(ui.oldPanel.get()).html());
  14. alert($(ui.newPanel.get()).html());
  15. },
  16. beforeActivate : function(event,ui) {
  17. alert("切换到另一个活动卡之前触发!");
  18. alert($(ui.oldTab.get()).html());
  19. alert($(ui.newTab.get()).html());
  20. alert($(ui.oldPanel.get()).html());
  21. alert($(ui.newPanel.get()).html());
  22. }
  23. });

在使用loadbeforeLoad事件之前,我们先要了解一下ajax调用的基本方法。
HTML部分代码:

  1. <div id="tabs">
  2. <ul>
  3. <li><a href="tab1.html">tab1</a></li>
  4. <li><a href="tab2.html">tab2</a></li>
  5. <li><a href="tab3.html">tab3</a></li>
  6. </ul>
  7. </div>

其中tab1.htmltab2.htmltab3.html只要书写即可,无须包含<div>,如:

  1. tab1.html内容:tab1-content
  2. tab2.html内容:tab2-content
  3. tab3.html内容:tab3-content11

而这个时候,就要修改各个选项卡内容区域的修饰了,右击->查看元素,就可以查找到各个选项卡内容区域<div>id了。如,我的style.css修改后:

  1. #ui-id-6, #ui-id-8, #ui-id-10 {
  2. border: 1px solid #ccc;
  3. border-top: none;
  4. position: relative;
  5. top: -2px;
  6. }

jQuery测试loadbeforeLoad事件代码:

  1. $('#tabs').tabs({
  2. load : function(event,ui) {
  3. alert("ajax远程加载文档后触发!");
  4. alert($(ui.tab.get()).html());
  5. alert($(ui.panel.get()).html());
  6. },
  7. beforeLoad : function(event,ui) {
  8. //alert("ajax远程加载文档前触发!");
  9. //alert($(ui.tab.get()).html());
  10. //alert($(ui.panel.get()).html()); //还未加载,所以得不到
  11. //ui.jqXHR.success(function(responseText) {
  12. // alert(responseText); //暂时还未加载,但可得到内容
  13. //});
  14. ui.ajaxSettings.url = "tab3.html"; //远程加载的均是tab3.html文档的内容
  15. }
  16. });

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) 一般值 获取option属性的值
tabs('option', param, value) jQuery对象 设置option属性的值

这里,只测试如下方法:
jQuery代码:

  1. $("#tabs").tabs();
  2. $("#tabs").tabs("disable"); //禁用全部选项卡
  3. $("#tabs").tabs("enable"); //启用全部选项卡
  4. $("#tabs").tabs("disable",0); //仅禁用第一个选项卡
  5. $("#tabs").tabs("enable",0); //仅启用第一个选项卡

重点看以下tabs('load')方法,该方法有局部刷新的功能。
HTML部分添加如下代码:

  1. <input type="button" id="button" value="更新内容"></input>

jQuery代码如下:

  1. $("#button").click(function () {
  2. $("#tabs").tabs("load", 0); //重载第一个选项卡内容
  3. });

达到的效果是当tab1.html文档内容发生改变时,无须整个页面刷新,只要点击更新内容按钮,就可局部重载第一个选项卡内容。

五、tabs中使用on()

在tabs的事件中,提供了使用on()方法处理的事件方法。
on()方法触发的选项卡事件

特效名称 说明
tabsload Ajax加载后触发
tabsbeforeload Ajax加载前触发
tabsactivate 选项卡切换时触发
tabsbeforeactivate 选项卡切换前触发

如,ajax远程加载文档后触发:

  1. $("#tabs").on("tabsload", function(event, ui) {
  2. alert("ajax远程加载文档后触发!");
  3. });
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注