jQueryUI,选项卡 UI

学习要点:

  1.使用 tabs

  2.修改 tabs 样式

  3.tabs()方法的属性

  4.tabs()方法的事件

  5.tabs 中使用 on

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

一.使用 tabs

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

tabs()方法,是jQueryUI的选项卡方法,将一个符合要求的区块,执行选项卡

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/ui_header_bg.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 的某个选项。

collapsible false/布尔值 当设置为 true 是,允许选项卡折叠对应的内容。默认值为 false,不会关闭对应内容。

    $('#tabs').tabs({
collapsible:true, //允许选项卡折叠对应的内容
});

disabled 无/数组 使用数组来指定禁用哪个选项卡的索引,比如:[0,1]来禁用前两个选项卡。

    $('#tabs').tabs({
collapsible:true, //允许选项卡折叠对应的内容
disabled:[0,1] //禁用哪个选项卡
});

event click/字符串 触发 tab 的事件类型,默认为 click。可以设置mouseover 等其他鼠标事件。默认是点击切换选项卡,和可以设置鼠标移入mouseover

    $('#tabs').tabs({
collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
event:'mouseover' //默认是点击切换选项卡,和可以设置鼠标移入mouseover
});

active 数组和布尔值如果是数组,初始化时默认显示哪个 tab,默认值为 0。如果是布尔值,那么默认是否折叠。条件必须是 collapsible 值为 true。

    $('#tabs').tabs({
collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
active:[1] //默认选项第2个
});
    $('#tabs').tabs({
collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
active:false //允许折叠的情况下,默认全部折叠
});

heightStyle content/字符串默认为 content,即根据内容伸展高度。Auto 则自动根据最高的那个为基准,fill 则是填充一定的可用高度。

    $('#tabs').tabs({
// collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
// event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
// active:false //允许折叠的情况下,默认全部折叠
heightStyle:'content' //字符串默认为 content,即根据内容伸展高度
});
    $('#tabs').tabs({
// collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
// event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
// active:false //允许折叠的情况下,默认全部折叠
heightStyle:'auto' //根据最高的那个为基准,其他的也相同高度
});
    $('#tabs').tabs({
// collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
// event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
// active:false //允许折叠的情况下,默认全部折叠
heightStyle:'fill' //所有选项统一填充一定高度
});

show false/布尔值 切换选项卡时,默认采用淡入效果。

    $('#tabs').tabs({
// collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
// event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
// active:false //允许折叠的情况下,默认全部折叠
// heightStyle:'fill' //所有选项统一填充一定高度
show:true //采用淡入效果
});

hide false 布尔值 切换选项卡时,默认采用淡出效果。

    $('#tabs').tabs({
// collapsible:true, //允许选项卡折叠对应的内容
// disabled:[0,1] //禁用哪个选项卡
// event:'mouseover', //默认是点击切换选项卡,和可以设置鼠标移入mouseover
// active:false //允许折叠的情况下,默认全部折叠
// heightStyle:'fill' //所有选项统一填充一定高度
hide:true //采用淡出效果
});

注意:上面两个都设置 true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字 符串参数。

blind 对话框从顶部显示或消失

bounce 对话框断断续续地显示或消失,垂直运动

clip 对话框从中心垂直地显示或消失

slide 对话框从左边显示或消失

drop 对话框从左边显示或消失,有透明度变化

fold 对话框从左上角显示或消失

highlight 对话框显示或消失,伴随着透明度和背景色的变化

puff 对话框从中心开始缩放。显示时“收缩”,消失时“生长”

scale 对话框从中心开始缩放。显示时“生长”,消失时“收缩”

pulsate 对话框以闪烁形式显示或消失

三.tabs()方法的事件

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

create 当创建一个选项卡时激活此事件
该方法有两个参数
(event, ui),ui 参数有两个子属性 tab 和 panel,得到当前活动卡和内容选项的对象。

    $('#tabs').tabs({
create:function (event, ui) { //当选项卡创建时触发
alert($(ui.tab.get()).html()); //选定的选项卡按钮对象
alert($(ui.panel.get()).html()); //选定的选项卡内容对象
}
});

activate  当切换一个活动卡时,启动此事件
该方法有两个参数
(event, ui),ui 参数有四个子属性 newTab、newPanel、
oldTab,oldPanel。分别得到的时候新 tab 对象、新内容
对象、旧 tab 对象和旧内容对象。

    $('#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()); //当前被选定的内容对象
}
});

beforeActivate 当切换一个活动卡之前,启动此事件。
该方法有两个参
数(event, ui),ui 参数有四个子属性 newTab、newPanel、
oldTab,oldPanel。分别得到的时候新 tab 对象、新内容
对象、旧 tab 对象和旧内容对象。

    $('#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()); //即将被选定内容对象
}
});

在使用 load 和 beforeLoad 事件之前,我们先要了解一下 ajax 调用的基本方法。【重点】

在选项卡元素里的a标签连接地址改成外部文件后在js执行了tabs()选项卡方法,就会自动ajax 调用外部文件

执行选项卡html

<div id="tabs">
<ul> <!--在选项卡元素里的a标签连接地址改成外部文件后在js执行了tabs()选项卡方法,就会自动ajax 调用外部文件,-->
<li><a href="tabs1.html">介绍</a></li>
<li><a href="tabs2.html">评价</a></li>
<li><a href="tabs3.html">客户</a></li>
</ul>
<!--<div id="tabs1"><p>tab1-content</p><p>tab1-content</p></div>-->
<!--<div id="tabs2">tab2-content</div>-->
<!--<div id="tabs3">tab3-content</div>-->
</div>

ajax 调用外部html

tabs1.html

<p>介绍内容</p>
<p>介绍内容</p>
<p>介绍内容</p>

tabs2.html

<p>评价内容</p>

tabs3.html

<p>售后内容</p>

最后效果

load 当 ajax 加载一个文档后激活此事件。
该方法有两个参数
(event, ui),ui 参数有两个子属性 tab 和 panel,得到当前
活动卡和内容选项的对象。

    $('#tabs').tabs({
load:function (event, ui) { //当 ajax 加载一个文档后激活此事件
alert($(ui.tab.get()).html()); //当前被选定按钮对象
alert($(ui.panel.get()).html()); //当前被选定内容对象
}
});

beforeLoad 当 ajax 加载一个文档前激活此事件。
该方法有两个参数
(event, ui),ui 参数有四个子属性 tab 和 panel 以及 jqXHR
和 ajaxSettings,前两个得到当前活动卡和内容选项的对
象,后两个是 ajax 操作对象。

    $('#tabs').tabs({
beforeLoad: function (event, ui) { //ajax 加载前触发
alert($(ui.tab.get()).html()); //当前被选定按钮对象
alert($(ui.panel.get()).html()); //当前被选定内容对象,加载前会是空白
ui.ajaxSettings.url = 'tabs2.html'; //指定外部文件,注意这里指定后,所有选项都会指定这个外部文件
ui.jqXHR.success(function (responseText) { //jqXHR对象,更多了解ajax章节
alert(responseText); //打印外部文件响应内容
});
}
});

 tabs('action', param)方法

tabs('disable') jQuery 对象 禁用选项卡

    $('#tabs').tabs({

    });

    //禁用选项卡
// $('#tabs').tabs('disable'); //全部禁用
$('#tabs').tabs('disable', 0); //只禁用指定的

tabs('enable') jQuery 对象 启用选项卡

    $('#tabs').tabs({

    });
$('#tabs').tabs('disable'); //禁用 //启用选项卡
// $('#tabs').tabs('enable'); //全部启用
$('#tabs').tabs('enable', 0); //只启用指定的

tabs('load') jQuery 对象 通过 ajax 获取选项卡内容

    //重载指定选项卡内容
$('#button').click(function () {
$('#tabs').tabs('load', 0); //重新加载第一个选项卡内容
});

tabs('widget') jQuery 对象 获取选项卡的 jQuery 对象

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

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

tabs('destroy') jQuery 对象 删除选项卡,直接阻断了 tabs。

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

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

tabs('refresh') jQuery 对象 更新选项卡,比如高度。

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

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

tabs('option', param) 一般值 获取 options 属性的值,获取tabs属性名称

    $('#tabs').tabs({
heightStyle: 'content' //字符串默认为 content,即根据内容伸展高度
});
//得到 tabs 的 options 值
alert($('#tabs').tabs('option','heightStyle'));

tabs('option', param, value) jQuery 对象 设置 options 属性的值,设置tabs属性值

    $('#tabs').tabs({
heightStyle: 'content' //字符串默认为 content,即根据内容伸展高度
});
//得到 tabs 的 options 值
$('#tabs').tabs('option','heightStyle','content');

五.tabs 中使用 on()

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

tabsload Ajax 加载后触发

    $('#tabs').tabs({
heightStyle: 'content' //字符串默认为 content,即根据内容伸展高度
}); //ajax 加载后触发
$('#tabs').on('tabsload', function () {
alert('ajax 加载后触发!');
});

tabsbeforeload Ajax 加载前触发

    $('#tabs').tabs({
heightStyle: 'content' //字符串默认为 content,即根据内容伸展高度
}); //ajax 加载前触发
$('#tabs').on('tabsbeforeload', function () {
alert('ajax 加载前触发!');
});

tabsactivate 选项卡切换时触发

    $('#tabs').tabs({
heightStyle: 'content' //字符串默认为 content,即根据内容伸展高度
}); //选项卡切换时触发
$('#tabs').on('tabsactivate', function () {
alert('选项卡切换时触发!');
});

tabsbeforeactivate 选项卡切换前触发

    $('#tabs').tabs({
heightStyle: 'content' //字符串默认为 content,即根据内容伸展高度
});
//选项卡切换前触发
$('#tabs').on('tabsbeforeactivate ', function () {
alert('选项卡切换前触发!');
});

第一百八十八节,jQuery,选项卡 UI的更多相关文章

  1. 第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页

    第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页 分页可以用一个第三方分页模块django-pure-pagination 下载地址:https://github.c ...

  2. 第一百八十九节,jQueryUI,折叠菜单 UI

    jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...

  3. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  4. 第一百八十节,jQuery-UI,知问前端--消息提示 UI

    jQuery-UI,知问前端--消息提示 UI 学习要点: 1.HTML 部分 2.CSS 部分 3.jQuery 部分 通过前面已学的 jQuery UI 部件,我们来创建一个注册表单. html ...

  5. 第一百七十八节,jQuery-UI,知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  6. 第一百六十八节,jQuery,表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  7. 第一百八十五节,jQuery,Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  8. 第一百八十四节,jQuery-UI,验证注册表单

    jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...

  9. 第一百八十三节,jQuery-UI,知问前端--验证插件

    jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

随机推荐

  1. nginx+lua+redis

    git clone --branch master https://github.com/openresty/lua-resty-redis.git yum install openssl opens ...

  2. Linux GPRS模块问题

    这是一个硬件问题,不过被我这个学软件的给遇到了.很尴尬,纠结了很久. GPRS模块如果没有插上sim卡,开机之后一切正常.一旦插上卡之后开机大约过十秒钟之后会自动关机.并在串口上面打印一下信息: II ...

  3. ElasticSearch 获取分词的Token

    用ES建好索引,有时候需要获取索引中的Token.ES提供了两个接口,链接如下: https://www.elastic.co/guide/en/elasticsearch/reference/1.6 ...

  4. Kubernetes用户指南(一)--快速开始、使用k8s配置文件

    一.快速开始 1.启动一个简单的容器. 一旦在container中打包好应用并将其commit为image之后,你就可以将其部署在k8s集群上. 一个简单的nginx服务器例子: 先决条件:你需要拥有 ...

  5. 怎样制作一个横版格斗过关游戏 Cocos2d-x 2.0.4

     本文实践自 Allen Tan 的文章<How To Make A Side-Scrolling Beat 'Em Up Game Like Scott Pilgrim with Coco ...

  6. null和undefined相等比较

    在==(相等)判断中,null和undefined相等(它们也与自身相等),除此之外不与其他值相等. 示例代码: <!DOCTYPE html> <html lang="z ...

  7. WP8数据存储--独立存储设置

    <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinition ...

  8. Swift学习-枚举(Enumerations)的使用方法

    Swift学习-枚举的使用方法 枚举的使用语法: enum someEnumer { // 枚举的成员值 } 以下是方向的一个例子: enum direction { case Up case Dow ...

  9. Tomcat 服务器只能存有一个正在运行的项目

    即使新建了一个new project (在同一个工作空间),启动Tomcat 还是会出现先前(工程名)一样的问题/异常. [原因]: 在底下Server 那里——Tomcat 7.X 底下会有很多工程 ...

  10. C# DateTime的11种构造函数

    别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Globalization; using Syste ...