ddaccordion 文档
ddaccordion 可以实现多种折叠式菜单，或者又叫手风琴式菜单，必须引入jquery.js
下载地址： http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js
初始化参数：
（更多内容：http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm ）
| 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 " |
|||
| 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: "
Set the first parameter to "
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 " |
|||
| 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." |
JavaScript Reference
外部可用方法：
（更多内容：http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm ）
| Method | Description |
|---|---|
ddaccordion.expandone('header_class', index) |
Expands a particular header's content. Parameters:
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:
|
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:
<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:
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:
|
代码示例：
<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