jquery extenstion ddaccordion's attributes

Then, in the HEAD section of the script, call ddaccordion.init() with the appropriate options:

Option Description
headerclassShared CSS class name of headers containers.
contentclassShared CSS class name of contents containers.
revealtypeReveal 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.

mouseoverdelayIf revealtype above is set to "mouseover ", set delay in milliseconds before header expands onMouseover.
collapseprevCollapse previous content (so only one open at any time)? true/false.
defaultexpandedIndex(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.
onemustopenCollapse previous content (so only one open at any time)? true/false.
animatedefaultShould contents that are open by default be animated into view? true/false.
persiststatePersist state of opened contents within a browser session, so returning to the page recalls the saved states? true/false.
toggleclassSpecifies 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"] .
togglehtmlThis 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"]

animatespeedSpeed of sliding animation. Value should be an integer in milliseconds (ie: 200), or one of the keywords "fast ", "normal ", or "slow ".
oninitEvent 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 ."
onopencloseEvent handler that fires whenever a header is expanded or contracted. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers ."

On the supplimentary page , lets see the methods you can call anywhere on your page to simulate a user clicking on a header.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值