首页
所有分类
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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
Node.js返回JSONP详解
May 18 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
JavaScript进阶（一）变量声明提升实例分析
May 09 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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
SONY(15) 短波(1) 电磁辐射(1) 电路图(1) 索尼(5) ICF-7600(1) 发报机(1) PL-880(1) 天线(6) 电台(1)
You might like
wordpress之wp-settings.php
2007/08/17 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python计算一个序列的平均值的方法
2015/07/11 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
pycharm2020.1.2永久破解激活教程，实测有效
2020/10/29 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
汽车机修工岗位职责
2014/03/06 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
公司联欢会策划方案
2014/05/19 职场文书
致运动员赞词
2015/07/22 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server