Easyui入门视频教程 第07集---Accordion的使用

Accordion 是一个 收缩的组件

类似挂历的

百度了一下

意思是

accordion 英[əˈkɔ:diən]
 美[əˈkɔrdiən]
 
n. 手风琴
adj. 可折叠的 

他就是 一个折叠的 很适合 做菜单

使用方法

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <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 title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

这样 就是一个大的div 的accordion 里面有三个 可折叠的 panel

我们 可以在某个panel 中去加载 一个 别的 页面

var pp = $('#aa').accordion('getSelected'); // get the selected panel     
 
 if (pp){     
 
     pp.panel('refresh','new_content.aspx');  // call 'refresh' method to load new content     
 
 }  

这样 每次 以选择 某个页面 就会 去 加载某个独立的页面'new_content.aspx' 的 内容 显示出来

在 chm文档中的 Container Options

表示 是 容器的一些属性

Name	Type	Description	Default
width	number	The width of accordion container.	auto
height	number	The height of accordion container.	auto
fit	boolean	Set to true to set the accordion container size fit it's parent container.	false
border	boolean	Defines if to show the border.	true
animate	boolean	Defines if to show animation effect when expand or collapse panel.	true

其中 animate 属性 表示 是否 显示 画册效果

当然 我们 也可以 动态的 通过 js 添加 属性

$('#aa').accordion('add', {
        title: 'New Title',
        content: 'New Content',
        selected: false
});

下载地址

http://pan.baidu.com/s/1eQ3hhgY