Taking advantage
of the oninit()
and onopenclose()
event handlers
You can customize the behaviour of your Accordion Content through the use of
the oninit()
and onopenclose()
event handlers inside
your initialization code.
The oninit(headers,expandedindices)
event
The oninit(headers, expandedindices)
event is fired once, when your Accordion Content
instance has finished loading on the page. It is passed two parameters:
headers
: An array referencing every header within your header group as DOM elementsexpandedindices
: An array containing the indices of the headers within the group that are currently expanded. If no headers are expanded, it returns a blank array ([]
).
The oninit
(headers, expandedindices
) method is convenient when all you wish to do is perform one-time
changes to your Accordion Content when it has loaded. Here's an example
illustrating how it works:
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: "fast", "normal", or "slow",
oninit:function(headers, expandedindices){ //custom code
to run when headers have initialized on the page
if (expandedindices.length==0) //if no expanded headers found in array
alert("No headers open by default")
else{
for (var i=0; i<expandedindices.length; i++){ //loop through each
expanded header and alert their contents
alert(headers[expandedindices[i]].innerHTML)
}
}
}
})
Highlighting headers that are expanded by default when the page loads Take I
Lets say you want to differentiate headers that are expanded by default when
the page loads by giving it a different background color. This versus headers
that are expanded when the user explicitly acts on one (click/mouse over). You can accomplish this using just
the oninit()
event handler, specifically:
- Use the
oninit(headers, expandedindices)
event handler to loop through and access all the headers, by referring to the "headers
" parameter of the event - To manipulate only those headers that are expanded, refer to the "
expandedindices
" parameter containing their indices.
<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>
Dogs
Cats
Rabbits
The header(s) that is expanded by default when the page loads gets an explicit black background on white foreground. Load this page again with the 1st header selected or the 3rd header selected by default to see the highlighted header change.
The
onopenclose(header,index,state,isuseractivated)
event
The onopenclose(header,index,state,isuseractivated)
event on the other hand fires whenever a
header is opened or closed. This obviously includes whenever a user explicitly
acts on a
header (click/mouse over), but also, once automatically for each header when the page first loads.
This is because technically, each header is being opened and closed when the
page loads, albeit automatically without user intervention. In that sense it's
similar to the oninit()
event handler. Four parameters are
passed into the event handler:
header
: A DOM reference to the header in question.index
: The index of the header relative to its peers.state
: The header's CSS display state ("block
" or "none
").isuseractivated
: And finally, a Boolean variable that returnstrue
if this event handler is being fired as the result of the user's explicit action on the header (clicking or mousing over versus automatically).
The onopenclose(header,index,state,isuseractivated)
event lets you make changes to every header
both when they initially load, and when the user explicitly toggles a
header. You can use the "isuseractivated
' parameter to differentiate
between the two conditions if needed. For example:
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: "fast", "normal", or "slow",
oninit:function(expandedindices){ //custom code to run when headers have
initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){
//custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==true){ //if
header is expanded as a result of the user clicking on it (versus expanded by
default when page loads)
header.style.backgroundColor="black" //change that header's
background color to black
}
}
})
Highlighting headers that are expanded by default when the page loads Take II
Earlier you saw how to use the oninit()
event handler to style headers that
are expanded by default differently when the page loads. Just to show how
onopenclose()
operates similarity yet different from oninit()
, I'll now
use
onopenclose()
to create the exact same "highlight default expanded
headers" behaviour that was done using oninit():
- Use the
onopenclose()
event handler to manipulate each header automatically when the page first loads - To detect when
onopenclose()
is being fired automatically (versus the user clicking/mousing over a header), probe the "isuseractivated
" parameter for a value offalse
. - To access and manipulate each header, use the "
header
" parameter.
The result:
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypetsB", //Shared CSS class name of headers group
contentclass: "thepetB", //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(expandedindices){ //custom code to run when headers have
initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){
//custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==false){ //if
header is expanded and NOT as the result of the user 's action (click or
mouseover)
header.style.backgroundColor="black"
header.style.color="white"
}
}
})
</script>
Dogs
Cats
Rabbits
The header(s) that is expanded by default when the page loads gets an explicit black background on white foreground. This is a separate process from that being done on headers that are expanded as a result of the user clicking/mousing over them. Load this page again with the 1st header selected or the 3rd header selected by default to see the highlighted header change.
Doing something whenever the user expands a header
Now to something that might involve both onopenclose()
and
oninit()
. Lets say you have an IFRAME on the page, and you wish to populate it
with a different page depending on which header the user chooses to expand. When the page first loads, the IFRAME should
automatically be populated already based on the default expanded header as well. You can
do this by:
- Using the
oninit()
event handler to get the indices of headers that are expanded by default when the page first loads, and use the very last index to auto populate the IFRAME with a corresponding page accordingly. Usingonopenclose()
instead to perform this task is a lot more cumbersome, since it's fired more than once (one time for each header), yet the IFRAME should only be populated a single time based on a single expanded header's index (the last if multiple headers are allowed to be open at the same time). - Using the
onopenclose()
event handler plus itsisuseractivated
parameter to fire only when the user explicitly expands a header, and update the IFRAME with a different page when that happens. - I'm storing the URL associated with each header to be loaded in the
IFRAME inside the
title
attribute of the header. You can choose a different approach obviously.
<script type="text/javascript">
//Initialize 3rd demo:
ddaccordion.init({
headerclass: "mypetsC", //Shared CSS class name of headers group
contentclass: "thepetC", //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: [0], //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 initalized
myiframe=window.frames["myiframe"] //reference and cache iframe to
populate
var lastexpandedindex=expandedindices.pop() //get last index within array
myiframe.location.replace(headers[lastexpandedindex].getAttribute('title'))
//load page associated with expanded header
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run
whenever a header is opened or closed
if (state=="block" && isuseractivated==true){ //if header is expanded and as
the result of the user clicking or moving mouse over it
myiframe.location.replace(header.getAttribute('title'))
}
}
})
</script>
<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Greenland_Dog.jpg">Dogs</h3>
<div class="thepetC">
Dog content here...
</div>
<h3 class="mypetsC"
title="http://commons.wikimedia.org/wiki/Image:Cat_%28634556562%29.jpg">Cats</h3>
<div class="thepetC">
Cat content here...
</div>
<h3 class="mypetsC"
title="http://commons.wikimedia.org/wiki/Image:Coello_GDFL50.jpg">Rabbits</h3>
<div class="thepetC">
Rabbit content here...
</div>
<iframe name="myiframe" style="width: 90%; height: 300px; border:1px solid
black"></iframe>
A demo:
Dogs
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species.
Cats
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
Rabbits
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan).
|
Table Of Contents