《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.1 技巧:使用折叠菜单微件组织内容

简介: 代码清单7-1介绍了折叠菜单(accordin)微件,通过它,可以将内容分组在标题下面,并且每次只显示选定的一组内容。单击另一个标题会关闭当前打开的一组内容然后在选定的标题下展开新的分组。

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

7.1 技巧:使用折叠菜单微件组织内容

代码清单7-1介绍了折叠菜单(accordin)微件,通过它,可以将内容分组在标题下面,并且每次只显示选定的一组内容。单击另一个标题会关闭当前打开的一组内容然后在选定的标题下展开新的分组。

代码清单7-1 把< h3>和< div>元素转换成折叠菜单

00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04  <title>jQuery UI Accordion</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   div#my-accordion {
09      font-size: 14px;
10   }
11  </style>
12 </head>
13 <body>
14
15 <div id="my-accordion">
16  <h3>
17    <a href="#first">Try to switch to the next part</a>
18  </h3>
19  <div>
20   The content
21  </div>
22  <h3>
23   <a href="#second">Next</a>
24  </h3>
25  <div>
26   More content
27  </div>
28  <h3>
29   <a href="#third">Last</a>
30  </h3>
31  <div>
32   and the last content
33  </div>
34 </div>
35
36 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
37 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js">
38 </script>
39
40 <script>
41 // 请将下列代码移至一个外部的.js文件中
42 $(document).ready(function() {
43
44  $('#my-accordion').accordion();
45  
46 });
47 </script>
48 </body>
49 </html>

第15~34行显示了一个有特定HTML结构的div。你应该发现其中的模式,也就是一个h3元素包含一个锚(anchor)元素,其后接div元素,如此重复。h3元素会用作分组的标题,而为了能对分组进行折叠,div元素需要是能隐藏的。

7.1.1 为折叠菜单元素添加样式
本章的简介中已经提到,折叠菜单会生成精心设计的HTML结构。更准确地说,它扩展了现有的HTML结构。在div上应用accordion方法后,HTML看上去如下面的代码段。(注意:下面的HTML是程序生成的,不需要手动录入。)

<div id="my-accordion"
 class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons"
 role="tablist">
 <h3
   class="ui-accordion-header ui-helper-reset ui-state-active
     ui-corner-top"
   role="tab"
   aria-expanded="true"
   aria-selected="true"
   tabindex="0">
   <span class="ui-icon ui-icon-triangle-1-s"></span>
   <a href="#first">First</a>
 </h3>
 <div
   class="ui-accordion-content ui-helper-reset ui-widget-content
    ui-corner-bottom ui-accordion-content-active"
   style="display: block; height: 18px; padding-top: 14px;
     padding-bottom: 14px; overflow-x: auto; overflow-y: auto; "
   role="tabpanel">Content for first section</div>
 <h3
   class="ui-accordion-header ui-helper-reset ui-state-default
     ui-corner-all"
   role="tab"
   aria-expanded="false"
   aria-selected="false"
   tabindex="-1" >
 <span class="ui-icon ui-icon-triangle-1-e"></span>
   <a href="#second">Second</a>
 </h3>
 <div
   class="ui-accordion-content ui-helper-reset ui-widget-content
     ui-corner-bottom"
   style="overflow-x: auto; overflow-y: auto; display: none;
     height: 18px; padding-top: 14px; padding-bottom: 14px; "
   role="tabpanel">Content for second section</div>

粗体部分表示相对于原来的HTML所做的更改。高亮显示的代码部分是可变的,当用户点击一个不同的折叠菜单的头部时,它们会随之变化。

7.1.2 设置折叠菜单的选项
有许多不同的选项可以设置和用于折叠菜单微件。表7-1列出了设置选项的例子,后面是每个选项功能的描述。

screenshot
screenshot
screenshot
7.1.3 捕获折叠菜单的事件
下面是一个示例,用来演示可能从ui参数得到的值:

ui = {
newContent: // 元素
newHeader:  // 元素
oldContent: // 元素
oldHeader:  // 元素
options: Object
 active: 3
 animated: "slide"
 autoHeight: true
 change: function (event, ui) {
 clearStyle: false
 collapsible: false
 disabled: false
 duration: undefined
 event: "click"
 fillSpace: false
 header: "> li > :first-child,> :not(li):even"
 icons: Object
 navigation: true
 navigationFilter: function (index) {
 proxied: "slide"
 proxiedDuration: undefined
}

下面演示了当一个新的折叠菜单组件实例化后,处理该事件的位置:

$('#my-accordion').accordion({create: function(event, ui) {
   // 事件处理
}});
//或
$('#my-accordion')
 .on('accordioncreate', function(event, ui) {
  // 事件处理
 })
 .accordion();
下面演示了选择了折叠菜单中的一个新分组,并且在组件切换动画完成后处理切换事件的位置:

$('#my-accordion').accordion({change: function(event, ui) {
  // 事件处理
}});
//或
$('#my-accordion').accordion()
 .on('accordionchange', function(event, ui) {
  // 事件处理
 });

下面演示了选择了折叠菜单中的一个新组,并且在动画刚开始时处理该事件的位置:

$('#my-accordion').accordion({changestart: function(event, ui) {
   // 事件处理
}});
//或
$('#my-accordion').accordion()
 .on('accordionchangestart', function(event, ui) {
   // 事件处理
 });

7.1.4 调用折叠菜单的方法
折叠菜单微件还包括了一些用于改变值和行为的方法。表7-2列出了这些可用的方法。
screenshot

相关文章
|
3月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
4月前
|
前端开发 JavaScript 测试技术
SAP 电商云 Spartacus UI 的自定义 hamburger 菜单
SAP 电商云 Spartacus UI 的自定义 hamburger 菜单
61 0
|
5月前
|
Web App开发 前端开发 开发者
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
26 1
|
5月前
|
JavaScript
jQuery文本段落展开和折叠效果
jQuery文本段落展开和折叠效果
|
6月前
|
JSON JavaScript 前端开发
【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
|
7月前
|
JavaScript 前端开发
|
8月前
|
JavaScript
Element UI - el-select(选择器)下拉多选菜单不换行显示
Element UI - el-select(选择器)下拉多选菜单不换行显示
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1098 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
112 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
315 0

相关产品

  • 云迁移中心