accordion-折叠面板

从今天开始学习jquery的easyui插件。在学习easyui之前，需要从jquery官网上下载easyui插件，里面有详细的demo实例。

首先介绍一下easyui中的第一个demo实例accordion（折叠面板)的使用:

<div id="aa" class=“easyui-accordion" >

　　<div title="About" data-options="iconCls:'icon-ok'" >

　　　　填写内容........................

　　</div>

　　<div title="Help" data-option="iconCls:'icon-help'">

　　　　填写内容...............................

　　</div>

　　<div title="Ajax" data-options="href:'_content.html'"></div>

</div>

其中，第一个div的class="easyui-accordion"指明了这个div是一个折叠面板,中间三个div是这个折叠板中的板块，可以通过点击标题来实现折叠和收起的效果。data-option="iconCls:'icon-ok"用来指定标题中的图标样式。data-options="href:'_content.html'"指定板块中文本内容所在页面地址。

接下来介绍accordion中函数的使用：

页面中html和js代码如下：

<div>
  <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="selectPanel()">Select</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="addPanel()">Add</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="removePanel()">Remove</a>
 </div>
 <div id="aa" class="easyui-accordion" >
  　　<div title="About" data-options="iconCls:'icon-ok'" >
   　　　　<h3 style="color:#0099FF;">Accordion for jQuery</h3>
   　　　　<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
  　　</div>
 </div>

<script type="text/javascript">
  function selectPanel(){
   　　$.messager.prompt('Prompt','Please enter the panel title:',function(s){
   　　 if (s){
    　　　　 $('#aa').accordion('select',s);
    　　}
   　});
  }
  　　var idx = 1;
  function addPanel(){
   　　$('#aa').accordion('add',{
    　　title:'Title'+idx,
    　　content:'<div style="padding:10px">Content'+idx+'</div>'
   });
   　　idx++;
  }
  function removePanel(){
   　　var pp = $('#aa').accordion('getSelected');
   　　if (pp){
    　　　　var index = $('#aa').accordion('getPanelIndex',pp);
    　　　　$('#aa').accordion('remove',index);
   　　　　}
 　　 }
 </script>

第一个div中包括三个超链接，class="easyui-linkbutton"指定这个超链接的样式为linkbutton，οnclick=”selectPanel()“点击事件触发执行selectPanel函数。

1.selectPanel()函数中$('#aa'),获取id为aa的Dom元素，.accordion(‘select’,s)为该元素执行accordion中的select函数，并传递参数s。

2.addPanel()函数中$('#aa').accordion('add',{}),使用add方法添加一个新的<div></div>板块.

3.removePanel()函数中$('#aa').accordion('getSelected')获取选中的元素，默认为第一个元素；$('#aa').accordion('getPanelIndex',pp)使用getPanelIndex方法获取元素pp的索引值，$('#aa').accordion('remove',index)函数使用remove方法，删除索引值=index的元素。

多重板块：

<div class="easyui-accordion" data-options="multiple:true" style="width:500px;height1:300px;"></div>

multiple:true表示该accordion为多重板块，板块可以向下延伸，而不必关闭未选中的板块。

树形结构：只需要定义class="easyui-tree"

<div title="TreeMenu" data-options="iconCls:'icon-search'" >
   <ul class="easyui-tree">
    <li>
     <span>Foods</span>
     <ul>
      <li>
       <span>Fruits</span>
       <ul>
        <li>apple</li>
        <li>orange</li>
       </ul>
      </li>
      <li>
       <span>Vegetables</span>
       <ul>
        <li>tomato</li>
        <li>carrot</li>
        <li>cabbage</li>
        <li>potato</li>
        <li>lettuce</li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </div>

由于是刚开始学easyui，做笔记的同时也希望和广大网友分享讨论，还有很多东西不懂，如果说错了或者说的不详细，还望指教。

把先进的技术挂在嘴边，不如把过时的技术放在心里。