ho quest' esempio , non riporto i .js ma qui è gestito l'evento:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel=stylesheet href="css/main.css" type="text/css" media=screen>
<script src="js/mootools1.2.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/external_file.js" type="text/javascript"></script>
<script type="text/javascript">
//look for the functions within the external javascript file
window.addEvent('domready', function() {
//send the toggle and content arrays to vars
var toggles = $$('.togglers');
var content = $$('.elements');
//set up your object var
//create a "new" Accordian object
//set the toggle array
//set the content array
//set your objects and events
var AccordionObject = new Accordion(toggles, content, {
//when you load the page
//will "show" the content (by index)
//with NO transition, it will just be open
//also note: if you use "fixedHeight,"
//show will not work when the page first loads
//"show" will override "display"
//show: 0,
//when you load the page
//this will "display" the content (by index)
//and the content will transition open
//if both display and show are set,
//show will override display
display: 0,
//defaults to true
//this creates a vertical accordian
height : true,
//this is for horizontal accordians
//tricky to use due to the css involved
//maybe a tutorial for another day?
width : false,
//defaults to true
//will give the content an opacity transition
opacity: true,
//defaults to false, can be integar -
//will fix height of all content containters
//would need an overflow css rule
//wont work on page load if you use "show"
fixedHeight: false,
//can be false or an integer
//similiar to fixedHeight above,
//but for horizontal accordians
fixedWidth: false,
//lets you toggle an open item closed
alwaysHide: true,
//standard onComplete event
//passes a variable containing the element for each content element
onComplete: function(one, two, three, four, five){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
five.highlight('#5D80C8'); //the added section
$('complete').highlight('#5D80C8');
},
//this will fire when you toggle open an element
//will pass the toggle control element
//and the content element that is opening
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
$('active').highlight('#76C83D');
},
//this will fire when an element starts to hide
//will pass all other elements
//the one closing or not opening
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
$('background').highlight('#DC4F4D');
}
});
$('add_section').addEvent('click', function(){
//the new section is made up of a pair
//(the new toggle ID and the corresponding Content ID)
//followed by where you want to place it in the index
AccordionObject.addSection('togglersID', 'elementsID', 0);
});
$('display_section').addEvent('click', function(){
//will determine which object displays first on page load
//will override the options display setting
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id="complete" class="ind">onComplete</div>
<div id="active" class="ind">onActive</div>
<div id="background" class="ind">onBackground</div>
<div id="accordian_wrap">
<h3 class="togglers">Toggle 1</h3>
<p class="elements">Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1</p>
<h3 class="togglers">Toggle 2</h3>
<p class="elements">Here is the content of toggle 2</p>
<h3 class="togglers">Toggle 3</h3>
<p class="elements">Here is the content of toggle 3</p>
<h3 class="togglers">Toggle 4</h3>
<p class="elements">Here is the content of toggle 4</p>
<h3 id="togglersID">Toggle Add</h3>
<p id="elementsID">Here is the content of toggle 4</p>
</div>
<button id="add_section">add section</button>
<button id="display_section">display section</button>
<ul>[*].display seems to require that you set the "show" option to work[*].display will recognize the index, but if you use addSection, that section will be the last index[*]if you use "fixedHeight," "show" will not work on page load, but "display" works fine[/list]
</body>
</html>
in particolare:
codice:
//standard onComplete event
//passes a variable containing the element for each content element
onComplete: function(one, two, three, four, five){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
five.highlight('#5D80C8'); //the added section
$('complete').highlight('#5D80C8');
},
è l'evento , non capisco pero' se si possa passare anzichè 5 elementi una variabile che identifica l'indice o l'id dell'elemento.
a me servirebbe una cosa del genere.
Grazie.
Rispondi quotando