ddaccordion 文档

最新推荐文章于 2021-06-18 13:26:31 发布

原创最新推荐文章于 2021-06-18 13:26:31 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ddaccordion #jquery #jQuery #JQUERY #Jquery

Web开发专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了动态驱动的Accordion插件的使用方法、初始化参数、外部可用方法及代码示例，帮助开发者轻松实现多种折叠式菜单或手风琴式菜单。

ddaccordion　可以实现多种折叠式菜单，或者又叫手风琴式菜单，必须引入jquery.js

下载地址： http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js

初始化参数：

Option Description

headerclass Shared CSS class name of headers containers.

contentclass Shared CSS class name of contents containers.

revealtype

Reveal content when user clicks or onmouseover the header? Valid values are: "click", "clickgo", or "mouseover".

The difference between "click" and clickgo" is only visible if your headers are hyperlinked. With "click", that link is disabled, so clicking each header will only expand the corresponding content. With "clickgo", the script will first expand the content, then navigate to the URL specified in the header afterwards.

mouseoverdelay If revealtype above is set to "mouseover", set delay in milliseconds before header expands onMouseover.

collapseprev Collapse previous content (so only one open at any time)? true/false.

defaultexpanded Index(es) of content(s) that should be open by default in the format [index1, index2, etc], where 0=1st content, 1=2nd content etc. [] denotes no content should be open by default.

scrolltoheader

v2.0 option

If set to true will scroll to the expanded header after its content has been revealed. It is only triggered when the user explicitly expands a header (either by clicking on a header or calling the expandone() method), and NOT when the page initially loads. Defaults to false.

onemustopen Collapse previous content (so only one open at any time)? true/false.

animatedefault Should contents that are open by default be animated into view? true/false.

persiststate Persist state of opened contents within a browser session, so returning to the page recalls the saved states? true/false.

toggleclass Specifies two CSS classes to be applied to the header when it's collapsed and expanded, respectively, in the form["class1", "class2"]. Enter a blank string inside either of the two to denote no CSS class, for example: ["", "class2"].

togglehtml

This option lets you optionally add additional HTML to each header when it's expanded and collapsed, respectively. It accepts 3 parameters:

togglehtml: ["none", "", ""],

For the first parameter, 4 possible values supported: "none", "prefix", "suffix", or "src". The 2nd and 3rd parameters are the HTML to add to each header when it's collapsed and expanded, in that order. Here are a few possible scenarios:

togglehtml: ["none", "", ""], //no additional HTML added to header
togglehtml: ["prefix", "[closed] ", "[open] "], //two text added in front of the header
togglehtml: ["suffix", " <img src='close.gif' />", " <img src='open.gif' />"], //two images added to the end of the header
togglehtml: ["src", "minus.gif", "plus.gif"], //assuming each header is an image itself, toggle between two images depending on state

Set the first parameter to "src" like in the last line above if your headers are images themselves, and you wish to update their "src" property depending on the content state. Here's an example:

JavaScript Reference

DOM Reference

IE Filters reference

Script setting:

headerclass: "myheader",
contentclass: "mycontent",
,
,
togglehtml: ["src", "minus.gif", "plus.gif"],

The HTML:

<img src="minus.gif" class="myheader" /><a href="#">JavaScript Reference</a><br />
<div class="mycontent">
1st content here...
</div>

<img src="minus.gif" class="myheader" /><a href="#">DOM Reference</a><br />
<div class="mycontent">
2nd content here...
</div>

<img src="minus.gif" class="myheader" /><a href="#">IE Filters reference</a><br />
<div class="mycontent">
3rd content here...
</div>

In the above example, instead of using regular container headers like a H1 tag, I'm using images instead. In other words, clicking on the images will expand/collapse content. In such a case, I can get the script to dynamically update the image shown by setting "togglehtml": ["src", "minus.gif", "plus.gif"]

animatespeed Speed of sliding animation. Value should be an integer in milliseconds (ie: 200), or one of the keywords "fast", "normal", or "slow".

oninit Event handler that fires when the headers have initailized for the first time on the page. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers."

onopenclose Event handler that fires whenever a header is expanded or contracted. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers."

外部可用方法：

Method	Description
`ddaccordion.expandone('header_class', index)`	Expands a particular header's content. Parameters: 'header_class': The shared CSS class name of the header index: An integer denoting the position of the target header relative to its peers (ones with the shared CSS class name). 0=1st header, 1=2nd etc. Example: <a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a>
`iddaccordion.collapseone('header_class', index)`	Collapses a particular header's content. Parameters: 'header_class': The shared CSS class name of the header index: An integer denoting the position of the target header relative to its peers (ones with the shared CSS class name). 0=1st header, 1=2nd etc.
`ddaccordion.toggleone('header_class', index)`	Toggle's the state of a particular header's content. If the content was previously collapsed, it will expand it, and visa versa. Parameters: 'header_class': The shared CSS class name of the header index: An integer denoting the position of the target header relative to its peers (ones with the shared CSS class name). 0=1st header, 1=2nd etc. <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>
`ddaccordion.expandall('header_class')`	Expands all headers within a group (one with the same shared CSS class name). Parameters: 'header_class': The shared CSS class name of the headers to expand, one at a time. Example: <a href="#" onClick="ddaccordion.expandall('mypets'); return false">Expand all headers</a> Note: If you call this method on a group of contents that's been set to allow only one open at any given time, only the very last content will expand as a result due to this stipulation.
`ddaccordion.collapseall('header_class')`	Collapses all headers within a group (one with the same shared CSS class name). Parameters: 'header_class': The shared CSS class name of the headers to collapse, one at a time.

代码示例：

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "mypetsA", //Shared CSS class name of headers group
contentclass: "thepetA", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [1], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initialized
 for (var i=0; i<expandedindices.length; i++){
  var expandedindex=expandedindices[i] //index of current expanded header index within array
  headers[expandedindex].style.backgroundColor='black'
  headers[expandedindex].style.color='white'
 }
}
})

</script>

其他内容：

http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-arrow.htm

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm