^1374057374992
@xworker.html.jqueryesayui.layout.accordion
sname
accordion
slabel
accordion
sdescriptors
xworker.lang.MetaDescriptor3
sextends
xworker.html.jqueryesayui.EasyUIThing
smany
true
seditCols
2
sinitialization
false
smodifier
public
sinheritDescription
false
Sdescription
#$@text#$@
<p style="text-align: left;">Override defaults with $.fn.accordion.defaults.</p>

<p style="text-align: left;">The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a &#39;href&#39; property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>

<p><img src="http://www.jeasyui.com/documentation/images/accordion.png" style="-webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); color:rgb(0, 0, 0); font-size-adjust:none; font-stretch:normal; font:14px/normal verdana, helvetica, arial, sans-serif; letter-spacing:normal; text-align:left; text-indent:0px; text-transform:none; white-space:normal; word-spacing:0px" /></p>

<h4 style="text-align: left;">Dependencies</h4>

<ul>
	<li>panel</li>
</ul>

<h4 style="text-align: left;">Usage Example</h4>

<h5 style="text-align: left;">Create Accordion</h5>

<p style="text-align: left;">Create accordion via markup, add &#39;easyui-accordion&#39; class to &lt;div/&gt; markup.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>div</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;aa&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">class</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;easyui-accordion&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">style</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;width:300px;height:200px;&quot;</span><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;</strong><strong>div</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">title</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;Title1&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">data-options</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;iconCls:&#39;icon-save&#39;&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">style</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;overflow:auto;padding:10px;&quot;</span><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;</strong><strong>h3</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">style</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;color:#0099FF;&quot;</span><strong>&gt;</strong><span style="color:black; font-size:14px">Accordion&nbsp;for&nbsp;jQuery</span><strong>&lt;/</strong><strong>h3</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;</strong><strong>p</strong><strong>&gt;</strong><span style="color:black; font-size:14px">Accordion&nbsp;is&nbsp;a&nbsp;part&nbsp;of&nbsp;easyui&nbsp;framework&nbsp;for&nbsp;jQuery.&nbsp;&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It&nbsp;lets&nbsp;you&nbsp;define&nbsp;your&nbsp;accordion&nbsp;component&nbsp;on&nbsp;web&nbsp;page&nbsp;more&nbsp;easily.<strong>&lt;/</strong><strong>p</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;/</strong><strong>div</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;</strong><strong>div</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">title</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;Title2&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">data-options</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;iconCls:&#39;icon-reload&#39;,selected:true&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">style</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;padding:10px;&quot;</span><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content2&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;/</strong><strong>div</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;</strong><strong>div</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">title</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;Title3&quot;</span><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content3&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;/</strong><strong>div</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px"><strong>&lt;/</strong><strong>div</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<p style="text-align: left;">We can change or recreate accordion later and modify some features.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><span style="color:black; font-size:14px">$(</span><span style="color:blue; font-size:14px">&#39;#aa&#39;</span><span style="color:black; font-size:14px">).accordion({&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;animate:<strong>false</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">});&nbsp;&nbsp;</span></li>
</ol>
</div>

<p><br />
&nbsp;</p>

<h5 style="text-align: left;">Refresh Accordion Panel Content</h5>

<p style="text-align: left;">Call &#39;getSelected&#39; method to get the current panel and then we can call &#39;refresh&#39; method of panel to load new content.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>var</strong><span style="color:black; font-size:14px">&nbsp;pp&nbsp;=&nbsp;$(</span><span style="color:blue; font-size:14px">&#39;#aa&#39;</span><span style="color:black; font-size:14px">).accordion(</span><span style="color:blue; font-size:14px">&#39;getSelected&#39;</span><span style="color:black; font-size:14px">);&nbsp;</span><span style="color:rgb(0, 130, 0); font-size:14px">//&nbsp;get&nbsp;the&nbsp;selected&nbsp;panel</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px"><strong>if</strong><span style="color:black; font-size:14px">&nbsp;(pp){&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;pp.panel(<span style="color:blue; font-size:14px">&#39;refresh&#39;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&#39;new_content.php&#39;</span><span style="color:black; font-size:14px">);&nbsp;&nbsp;</span><span style="color:rgb(0, 130, 0); font-size:14px">//&nbsp;call&nbsp;&#39;refresh&#39;&nbsp;method&nbsp;to&nbsp;load&nbsp;new&nbsp;content</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">}&nbsp;&nbsp;</span></li>
</ol>
</div>
#$@text#$@
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@width
sname
width
sshowLabel
true
sgroup
accordion
sreadOnly
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">The width of accordion container.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@height
sname
height
sshowLabel
true
sgroup
accordion
sreadOnly
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">The height of accordion container.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@fit
sname
fit
sinputtype
truefalse
sshowLabel
true
sgroup
accordion
sreadOnly
false
sdefault
false
sinheritDescription
false
Sdescription
#$@text#$@
<table class="doc-table" style="-webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); border-collapse:collapse; border-spacing:0px; color:rgb(0, 0, 0); font-size-adjust:none; font-stretch:normal; font:14px/normal verdana, helvetica, arial, sans-serif; letter-spacing:normal; margin-left:9px; text-align:left; text-indent:0px; text-transform:none; white-space:normal; word-spacing:0px">
	<tbody>
		<tr>
			<td>Set to true to set the accordion container size fit it&#39;s parent container.</td>
		</tr>
	</tbody>
</table>
#$@text#$@
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@border
sname
border
sinputtype
truefalse
sshowLabel
true
sgroup
accordion
sreadOnly
false
sdefault
true
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines if to show the border.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@animate
sname
animate
sinputtype
truefalse
sshowLabel
true
sgroup
accordion
sreadOnly
false
sdefault
true
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines if to show animation effect when expand or collapse panel.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@Panel
sname
Panel
sdescriptors
xworker.lang.MetaDescriptor3/@thing
sextends
xworker.html.jqueryesayui.layout.panel
smany
true
seditCols
2
sinitialization
false
sgroup
jquery-easyui.accordion
smodifier
public
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">The accordion panel options is inhirited from panel, below is the addition properties:</span></p>
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@Panel/@selected
sname
selected
sinputtype
truefalse
sshowLabel
true
sgroup
panel
sreadOnly
false
sdefault
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Set to true to expand the panel.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher
sname
onSelect
sdescriptors
xworker.lang.MetaDescriptor3/@thing
sextends
xworker.html.jqueryesayui.EasyUIFunction
smany
true
seditCols
2
sinitialization
false
sgroup
jquery-easyui.accordion
smodifier
public
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Fires when a panel is selected.</span></p>
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher/@name
sname
name
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher/@label
sname
label
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher/@params
sname
params
sshowLabel
true
ssize
60
sreadOnly
false
sdefault
title,index
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher1
sname
onAdd
sdescriptors
xworker.lang.MetaDescriptor3/@thing
sextends
xworker.html.jqueryesayui.EasyUIFunction
smany
true
seditCols
2
sinitialization
false
sgroup
jquery-easyui.accordion
smodifier
public
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Fires when a new panel is added.</span></p>
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher1/@name
sname
name
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher1/@label
sname
label
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher1/@params
sname
params
sshowLabel
true
ssize
60
sreadOnly
false
sdefault
title,index
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher2
sname
onBeforeRemove
sdescriptors
xworker.lang.MetaDescriptor3/@thing
sextends
xworker.html.jqueryesayui.EasyUIFunction
smany
true
seditCols
2
sinitialization
false
sgroup
jquery-easyui.accordion
smodifier
public
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Fires before a panel is removed, return false to cancel the remove action.</span></p>
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher2/@name
sname
name
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher2/@label
sname
label
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher2/@params
sname
params
sshowLabel
true
ssize
60
sreadOnly
false
sdefault
title,index
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher3
sname
onRemove
sdescriptors
xworker.lang.MetaDescriptor3/@thing
sextends
xworker.html.jqueryesayui.EasyUIFunction
smany
true
seditCols
2
sinitialization
false
sgroup
jquery-easyui.accordion
smodifier
public
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Fires when a panel is removed.</span></p>
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher3/@name
sname
name
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher3/@label
sname
label
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.layout.accordion/@searcher3/@params
sname
params
sshowLabel
true
ssize
60
sreadOnly
false
sdefault
title,index
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
