《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.9 技巧:使用选项卡微件导航页面-阿里云开发者社区

开发者社区> 异步社区> 正文

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.9 技巧:使用选项卡微件导航页面

简介: 在本章的前面,我们引入了折叠菜单微件来组织较大的内容集,并且一次只显示一组内容。选项卡元素具有相似的功能,只存在一些细微的差别。虽然不一定总是正确的,但我还是要说,折叠菜单适合作为主界面侧边上的一个扩展元素,而选项卡元素最好用做主界面本身。
+关注继续查看

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章,第7.9节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

7.9 技巧:使用选项卡微件导航页面

在本章的前面,我们引入了折叠菜单微件来组织较大的内容集,并且一次只显示一组内容。选项卡元素具有相似的功能,只存在一些细微的差别。虽然不一定总是正确的,但我还是要说,折叠菜单适合作为主界面侧边上的一个扩展元素,而选项卡元素最好用做主界面本身。

代码清单7-9将一个相对简单的HTML结构转换成一组选项卡。折叠菜单和选项卡元素之间的一个差异是,选项卡的标题列表和内容是彼此分开的,但折叠菜单的标题和内容是一体的。

代码清单7-9 将无序列表转换为选项卡面板

00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04  <title>jQuery UI Tabs</title>
05  <link type="text/css" rel="stylesheet" href=
06   "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
07  <style>
08   body {
09     font-size: 12px;
10   }
11   </style>
12 </head>
13 <body>
14
15 <div id="my-tabs">
16  <ul>
17   <li>
18    <a href="#first">First</a>
19   </li>
20   <li>
21    <a href="#second">Second</a>
22   </li>
23   <li>
24    <a href="#third">Third</a>
25   </li>
26  </ul>
27  <div id="first">
28   This is the text of the first tab
29  </div>
30  <div id="second">
31   You have switched to the second tab
32  </div>
33  <div id="third">
34    And finally, you have switched to the third tab
35  </div>
36 </div>
37
38 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
39 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js">
40 </script>
41
42 <script>
43 // 请将下列代码移至一个外部的.js文件中
44 $(document).ready(function() {
45  
46  $('#my-tabs').tabs();
47    
48 });
49 </script>
50 </body>
51 </html>

在代码清单7-9中,选项卡的内容在第27~35行的div元素中。你可以很容易地把这个例子修改为使用AJAX从服务器获取内容。在这种情况下,你需要将href属性更改为服务器端的地址,它指向你想要显示在选项卡中的内容。内容需要和当前的HTML在同一服务器上。当你定义好这些引用时,在底层,选项卡组件会自动调用jQuery的load``()函数去加载HTML。此功能在第5章中做过演示。

7.9.1 为选项卡元素添加样式
选项卡元素并没有对HTML做很多更改。它只是增加了很多类,通过这些类既可以用切换主题的方式也可以用自定义CSS样式的方式来装饰选项卡元素。

<div id="my-tabs"
 class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix
   ui-widget-header ui-corner-all">
   <li class="ui-state-default ui-corner-top  ui-tabs-selected
    ui-state-active">
    <a href="#first">First</a>
   </li>
   <li class="ui-state-default ui-corner-top">
    <a href="#second">Second</a>
  </li>
  <li class="ui-state-default ui-corner-top">
   <a href="#third">Third</a>
  </li>
 </ul>
 <div id="first" class="ui-tabs-panel ui-widget-content
    ui-corner-bottom">
  This is the text of the first tab
 </div>
 <div id="second" class="ui-tabs-panel ui-widget-content
    ui-corner-bottom ui-tabs-hide" >
  You have switched to the second tab
 </div>
 <div id="third" class="ui-tabs-panel ui-widget-content
    ui-corner-bottom ui-tabs-hide" >
  And finally, you have switched to the third tab
 </div>
</div>

加粗的代码是由选项卡组件添加的。带底纹高亮显示的代码依赖于当前哪个选项卡是打开的。本例中,第一个选项卡是打开的。

7.9.2 设置选项卡的选项
正如jQuery UI的其他微件,选项卡微件有几个选项可以设置,用来改变默认行为。表7-6给出了可用于选项卡微件的选项的代码示例以及描述。

screenshot
screenshot
7.9.3 捕获选项卡的事件
选项卡微件的事件可以在多个地方处理或触发。下面列出的代码片段可以作为处理事件的示例。

当一个新的选项卡微件初始化时进行的事件处理:

$('#my-tabs').tabs({create: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs')
 .on('tabscreate', function(event, ui) {
   // 事件处理
 })
 .tabs();

当一个不同的选项卡被点击时进行的事件处理:

$('#my-tabs').tabs({select: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsselect', function(event, ui) {
   // 事件处理
 });

当远端内容加载完成时进行的事件处理:

$('#my-tabs').tabs({load: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsload', function(event, ui) {
   // 事件处理
 });

当一个不同的选项卡显示时进行的事件处理:

$('#my-tabs').tabs({show: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsshow', function(event, ui) {
   // 事件处理
 });

当一个选项卡被添加时进行的事件处理:

$('#my-tabs').tabs({add: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsadd', function(event, ui) {
   // 事件处理
 });

当一个选项卡被移除时进行的事件处理:

$('#my-tabs').tabs({remove: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsremove', function(event, ui) {
   // 事件处理
 });

当一个以前被禁用的选项卡被启用时进行的事件处理:

$('#my-tabs').tabs({enable: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsenable', function(event, ui) {
   // 事件处理
 });

当一个以前被启用的选项卡被禁用时进行的事件处理:

$('#my-tabs').tabs({disable: function(event, ui) {
   // 事件处理
}});
//或
$('#my-tabs').tabs()
 .on('tabsdisable', function(event, ui) {
   // 事件处理
 });

7.9.4 调用选项卡的方法
选项卡微件使用的方法与第6章讲的可拖曳交互组件以及对话框和折叠菜单微件相同。参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。

在指定位置用指定的URL和选项卡标签来添加一个新选项卡:

$('#my-tabs').tabs('add', '/my-url', 'My Tab Label', 1);
移除指定索引位置的选项卡:

$('#my-tabs').tabs('remove', 1);
启用指定索引值的选项卡:

$('#my-tabs').tabs('enable', 1);
禁用指定索引值的选项卡:

$('#my-tabs').tabs('disable', 1);
选定指定索引值的选项卡:

$('#my-tabs').tabs('select', 1);
重新加载指定选项卡的内容:

$('#my-tabs').tabs('load', 1);
在指定索引值的选项卡上加载指定的URL:

$('#my-tabs').tabs('url', 1, '/my-url');
获取选项卡组件选项卡的个数:

$('#my-tabs').tabs('length');
中断所有的AJAX请求:

$('#my-tabs').tabs('abort');
每隔2000毫秒自动循环选项卡。当用户选定了一个选项卡时停止循环,因为continuing 参数是false:

$('#my-tabs').tabs('rotate', 2000, false);

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9943 0
实用技巧:使用 jQuery 异步加载 JavaScript 脚本
  JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。
862 0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1851 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10878 0
UWP 判断windows mobile是使用的实体键还是虚拟按键
原文:UWP 判断windows mobile是使用的实体键还是虚拟按键 最近在写启动屏幕,发现虚拟按钮会挡住,启动屏幕的最下面的元素,大概有50 px。可是有什么办法知道手机是用的实体键还是虚拟按键吗? 如下图。
941 0
好程序员分享JQuery.get提交页面不跳转的解决方法
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.
3477 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13690 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载