首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery之折叠面板的深入解析

Posted in Javascript onJune 19, 2013

1：折叠面板可以将不同分类的内容分别放在不同的面板中，这些面板在页面中层叠摆放，用户可以通过单击各个面板的标题来展开该面板，查看面板的内容，
与此同时，将自动折叠隐藏其他面板
$(selector).accordion(options);
options可以选择的属性为：
disabled, active, animated, autoHeight, clearStyle, collapsible, event, fillSpace, header, icons, navigation, navigationFilter
简单实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>Accordion AutoHeight</title>
 <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
 <script src="JS/jquery-1.4.2.min.js"></script>
 <script src="JS/jquery.ui.core.js"></script>
 <script src="JS/jquery.ui.widget.js"></script>
 <script src="JS/jquery.ui.accordion.js"></script>
 <script>
 $(function() {
  $( "#accordion" ).accordion({
   autoHeight: false
  });
 }); 
 </script>
    <style type="text/css">
 #accordion h3{ font-size:13px; font-weight:700; }
 #accordion>div{ font-size:12px; }
    </style>
</head>
<body>
<div id="accordion">
    <h3><a href="#">标题 1</a></h3>
    <div>
        这是一段较少的内容<br />
    </div>
    <h3><a href="#">标题 2</a></h3>
    <div>
        这是一段很长的内容<br />这是一段很长的内容<br />
        这是一段很长的内容<br />这是一段很长的内容<br />
        这是一段很长的内容<br />这是一段很长的内容<br />
        这是一段很长的内容<br />这是一段很长的内容<br />
    </div>
</div>
<div style="margin:8px 0; padding:10px; height:50px; border:solid 1px #aaa;">
这是另一个模块，将随着折叠面板的大小而改变位置
</div>
</body>
</html>

效果图：
jQuery之折叠面板的深入解析

2：自定义折叠面板图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>Accordion Icon</title>
 <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
 <script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="JS/jquery.ui.core.js"></script>
 <script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
 <script type="text/javascript" src="JS/jquery.ui.accordion.js"></script>
 <script>
 $(document).ready(function() {
  var triangle_icon = {
   header : "ui-icon-triangle-1-e",
   headerSelected : "ui-icon-triangle-1-s"
  };  var circle_arrow_icon = {
   header: "ui-icon-circle-arrow-e",
   headerSelected: "ui-icon-circle-arrow-s"
  };
  /* 初始化折叠面板 */
  $('#accordion').accordion();
  $( "#toggle" ).toggle(function() {
   $( "#accordion" ).accordion( "option", "icons", circle_arrow_icon );
  }, function() {
   $( "#accordion" ).accordion( "option", "icons", triangle_icon );
  });
 }); 
 </script>
    <style type="text/css">
 body{ padding:30px; }
 #accordion h3{ font-size:13px; font-weight:700; }
 #accordion>div{ font-size:12px; }
    </style>
</head>
<body>
<div style="width:220px; margin:10px 0;">
    <div id="accordion">
        <h3><a href="#">标题 1</a></h3>
        <div>
            这是一段内容<br />
        </div>
        <h3><a href="#">标题 2</a></h3>
        <div>
            这是一段内容<br />
        </div>
    </div>
</div>
<input id="toggle" value="切换图标" type="button"  />
</body>
</html>

程序效果图：
 jQuery之折叠面板的深入解析
3：能自定义排列顺序的折叠面板
折叠面板可以作为分类项目的主面板来使用，因为操作习惯，用户通常希望能够自定义面板的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AccordionSortable</title>
<link rel="stylesheet" type="text/css" href="themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
<script type="text/javascript" src="JS/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="JS/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="JS/jquery.ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#accordion")
  .accordion({
   header: "> div > h4"  //指定标题为该面板容器下的div标签中的h4元素
  })
  .sortable();  //可以将其封装为可排序的控件
});
</script>
<style>
body{ padding:30px; }
#accordion{ font-size:12px; }
#accordion>div>h3{ font-size:13px; font-weight:700; }
</style>
</head>
<body>
<div style="width:300px; ">
    <div id="accordion">
        <div>
            <h4><a href="#">标题 1</a></h4>
            <div>
                这是一段内容<br />
            </div>
        </div>
        <div>
            <h4><a href="#">标题 2</a></h4>
            <div>
                这是一段内容<br />
            </div>
        </div>
        <div>
            <h4><a href="#">标题 3</a></h4>
            <div>
                这是一段内容<br />
            </div>
        </div>
    </div>
</div>
</body>
</html>

jQuery之折叠面板的深入解析
4：折叠面板的方法
destroy, disable, enable, option, widget, activate, resize
$('#accordion').accordion("activate", 2);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="GBK">
 <title>Accordion Resize</title>
 <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
 <script src="JS/jquery-1.4.2.min.js"></script>
 <script src="JS/jquery.ui.core.js"></script>
 <script src="JS/jquery.ui.widget.js"></script>
 <script src="JS/jquery.ui.mouse.js"></script>
 <script src="JS/jquery.ui.resizable.js"></script>
 <script src="JS/jquery.ui.accordion.js"></script>
 <script>
 $(document).ready(function(){
  $( "#accordion" ).accordion({
   fillSpace : true  /* 设置为自动填充父元素空间 */
  });  /* 将容器设置为可改变大小的，
   最小高度为150，
   并且在改变大小的时候调用折叠面板的resize方法 */
  $( "#container" ).resizable({
   minHeight : 150,
   resize : function() {
    $( "#accordion" ).accordion( "resize" );
   }
  });
 });
 </script>
    <style type="text/css">
 #accordion h3{ font-size:13px; font-weight:700; }
 #accordion>div{ font-size:12px; }
 #container{ padding:10px; width:300px; height:180px; }
    </style>
</head>
<body>
<!-- 折叠面析的容器 -->
<div id="container" class="ui-widget-content">
    <!-- 折叠面析。其子元素中h3为面板标题，div为面板主体 -->
    <div id="accordion">
        <h3><a href="#">标题 1</a></h3>
        <div>
            这是第一段内容<br />
            <ul>
                <li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
            </ul>
        </div>
        <h3><a href="#">标题 2</a></h3>
        <div>
            这是第二段内容<br />这是第二段内容<br />
        </div>
        <h3><a href="#">标题 3</a></h3>
        <div>
            这是第三段内容<br />这是第三段内容<br />这是第三段内容<br />
        </div>
    </div>
    <!-- 这个span标记将显示一个拖动柄 -->
    <span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
</div>
<div style="margin:8px 0; padding:10px; width:300px; height:50px; border:solid 1px #aaa;">
这是另一个模块，将随着折叠面板容器的大小而改变位置
</div>
</body>
</html>

效果图：
  jQuery之折叠面板的深入解析

上述代码首先将折叠面板初始化为可自动填充父元素的组件，然后设置容器可以自动调整大小，并在容器控件大小改变时调用折叠面板的resize方法，
最后实现一起调整大小的效果
5：折叠面板的事件
change和changestart事件

  $("#accordion").accordion({
     change: function(event, ui) {
     },
     changestart: function(event, ui) {
     }
   })

*event: 触发的事件对象
*ui：视图对象，有4个属性，即newHeader, 表示当前面板标题；oldHeader，表示前一个面板的标题，newContent：表示当前面板内容；oldContent, 表示前一个面板内容，
这些返回的都是jQuery对象

jQuery之折叠面板的深入解析

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
Apr 12 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
jQuery之选择组件的深入解析
Jun 19 #Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 #Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 #Javascript
解析JavaScript中的标签语句
Jun 19 #Javascript
解析window.open的使用方法总结
Jun 19 #Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 #Javascript
Js,alert出现乱码问题的解决方法
Jun 19 #Javascript
Mysql8(2) MutationObserver(1) Three.js(1) appdata(1) OOP(1) tree shaking(1) celery(1) Outlook(1) SeaTable(1) 黑屏(2)
You might like
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
js实现无缝滚动图（可控制当前滚动的方向）
2017/02/22 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python基础梳理（一）（推荐）
2019/04/06 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Python函数式编程实例详解
2020/01/17 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
英国高街品牌：Miss Selfridge（塞尔弗里奇小姐）
2016/09/21 全球购物
函授毕业自我鉴定
2014/02/04 职场文书
村容村貌整治方案
2014/05/21 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python