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

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

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