首页
所有分类
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 相关文章推荐
js中widow.open()方法使用详解
Jul 30 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）
Jul 03 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
Vue 自定义指令功能完整实例
Sep 17 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
数据重复(1) sortInts(1) feDisplacementMap(1) element-china-area-data(1) tabBar(1) Apache(17) Navigator(1) uniapp(4) Flutter(2) Hudi(1)
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
使用数据库保存session的方法
2006/10/09 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
给ECShop添加最新评论
2015/01/07 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
python函数形参用法实例分析
2015/08/04 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python 忽略warning的输出方法
2018/10/18 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
有模特经验的简历自我评价
2013/09/19 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
美丽人生观后感
2015/06/03 职场文书
雷锋之歌观后感
2015/06/10 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
任命书格式模板
2015/09/22 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
Android自定义双向滑动控件
2022/04/19 Java/Android