jQuery之折叠面板的深入解析

1:折叠面板可以将不同分类的内容分别放在不同的面板中，这些面板在页面中层叠摆放，用户可以通过单击各个面板的标题来展开该面板，查看面板的内容，与此同时，将自动折叠隐藏其他面板$(选择器)。手风琴（可选);选择可以选择的属性为：禁用、活动、动画、自动高度、clearStyle、可折叠、事件、填充空间、标题、图标、导航、导航过滤器简单实例：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title accord AutoHeight/title link rel='样式表href=' themes/base/jquery。ui。全部。CSS ' script src=' http : js/jquery-1。4 .2 .量滴js '/script script src=' http : js/jquery。ui。核心。js '/script script src=' http : js/jquery。ui。小部件。js '/script script src='手风琴({ auto height : false })；});/script style type=' text/CSS ' # accordo H3 { font-size :13 px；字体粗细：700；} # accordiondiv { font-size :12 px；}/style/head dydiv id=' accordion ' h3a href=' # '标题1/a/h3分区这是一段较少的内容br//div h3a href='# '标题2/a/h3分区这是一段很长的内容br /这是一段很长的内容br /这是一段很长的内容br /这是一段很长的内容br /这是一段很长的内容br /这是一段很长的内容br /这是一段很长的内容br /这是一段很长的内容br//div/div style=' margin 33608 px 0；padding:10px高度：50 pxborder:solid 1px # aaa '这是另一个模块，将随着折叠面板的大小而改变位置/div/body/html效果图

2:自定义折叠面板图标复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/title手风琴图标/title链接rel='样式表href=' themes/base/jquery。ui。全部。CSS ' script type=' text/JavaScript ' src=' http : js/jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。ui。核心。js '/script脚本类型=' text/JavaScript ' ready(function(){ var triangle _ icon={ header : ' ui-icon-triangle-1-e '，header selected : ' ui-icon-triangle-1-s ' }；var circle _ arrow _ icon={表头： ' ui-icon-circle-arrow-e '，表头选中： ' ui-icon-circle-arrow-s ' }；/* 初始化折叠面板*/$(' #手风琴')。手风琴();$(“# toggle”).切换(函数(){ $(' #手风琴')).手风琴('选项','图标，圆圈_箭头_图标)；}，function(){ $(' #手风琴').手风琴('选项','图标，三角形_图标);});});/script style type=' text/CSS ' body { padd :30 px；} #手风琴H3；字体粗细：700；} # accordiondiv { font-size :12 px；}/style/head dydiv style=' width :220 px；边距：10 px0 'div id='手风琴h3a href='# '标题1/a/h3分区这是一段内容br//div h3a href='# '标题2/a/h3分区这是一段内容br///div/divinput id=' toggle ' value='切换图标type=' button '/body/html程序效果图

3:能自定义排列顺序的折叠面板折叠面板可以作为分类项目的主面板来使用，因为操作习惯，用户通常希望能够自定义面板的位置复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/titleaccordion便携/title link rel='样式表'类型=' text/CSS ' href=' themes/base/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/script ready(function(){ $(' # accordion ')).手风琴({header: ' div h4' //指定标题为该面板容器下的差异标签中的h4元素}).可排序();//可以将其封装为可排序的控件});/script style body { padd :30 px；} #手风琴{ font-size :12 px} # accordiondiv H3 { font-size :13 px；字体粗细：700；}/style/head dydiv style=' width :300 px；'div id='手风琴div h4a href='# '标题1/a/h4分区这是一段内容br///div/div h4a href=' # '标题2/a/h4分区这是一段内容br///div/div h4a href=' # '标题3/a/h4分区这是一段内容br///div/div/body/html(9501 . 163.com)

4:折叠面板的方法销毁、禁用、启用、选项、小部件、激活、调整大小$(' #手风琴').手风琴('激活',2);复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' health eta charset=' GBK ' title accorder Resize/title link rel='样式表href=' themes/base/jquery。ui。全部。CSS ' script src=' http 33 ready(function(){ $(' # accordion ')).手风琴({fillSpace : true /*设置为自动填充父元素空间*/});/* 将容器设置为可改变大小的，最小高度为150,并且在改变大小的时候调用折叠面板的调整大小方法*/$(“# container”).可调整大小({ minHeight : 150，resize 3360 function(){ $(' # accordion ')).手风琴('调整大小');}});});/script style type=' text/CSS ' # accordo H3 { font-size :13 px；字体粗细：700；} # accordiondiv { font-size :12 px；} #容器{ padding:10px宽度宽度：300像素高度：180 px}/风格/头像dy！-折叠面析的容器-div id=' container ' class=' ui-widget-content '！-折叠面析。其子元素中h3为面板标题，div为面板主体- div id='手风琴h3a href='# '标题1/a/h3分区这是第一段内容br/ul li列表项1/丽丽列表项2/丽丽列表项3/li /ul /div h3a href='# '标题2/a/h3分区这是第二段内容br /这是第二段内容br//div h3a href='# '标题3/a/h3分区这是第三段内容br /这是第三段内容br /这是第三段内容br///div/div！-这个跨度标记将显示一个拖动柄ui-icon ui-icon-grip-点线-水平style=' margin :2 px auto '/span/div style=' margin 33608 px 0；padding:10px宽度宽度：300像素高度：50 pxborder:solid 1px # aaa '这是另一个模块，将随着折叠面板容器的大小而改变位置/div/body/html效果图

上面的代码首先将折叠面板初始化为可以自动填充父元素的组件，然后将容器设置为自动调整其大小，并在容器控件的大小发生变化时调用折叠面板的resize方法。最后一起实现大小调整的效果。5:折叠面板的事件变化和变化开始复制如下： $ ('#手风琴')。手风琴({change: function (event，ui) {})。Start:函数(event，UI){ } })* Event : * UI触发的事件对象：一个视图对象，有四个属性，即newHeader，表示当前面板标题；OldHeader表示前一个面板的标题，newContent表示当前面板的内容；OldContent，它表示前面的面板内容，所有这些内容都返回jQuery对象。