JavaScript DHTML/Ajax Layer/Accordion Panel

Материал из Web эксперт
Перейти к: навигация, поиск

Accordion with color transition example

   <source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript">

</script> <script type="text/javascript"> var accordion; var accordionTogglers; var accordionContents; window.onload = function() { 

 accordionTogglers = document.getElementsByClassName("accToggler");
 
 accordionTogglers.each(function(toggler){
   //remember the original color
   toggler.origColor = toggler.getStyle("background-color");
   //set the effect
   toggler.fx = new Fx.Color(toggler, "background-color");
 });
 
 accordionContents = document.getElementsByClassName("accContent");
   
 accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
   //when an element is opened change the background color to blue
   onActive: function(toggler){
     toggler.fx.toColor("#6899CE");
   },
   onBackground: function(toggler){
     //change the background color to the original (green) 
     //color when another toggler is pressed
     toggler.setStyle("background-color", toggler.origColor);
   }    
 });

} </script> <style type="text/css">

  • {padding:0px; margin:0px;}

body{font-size:11px; font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;} .accToggler{ 

 margin: 3px auto;
 padding: 3px;
 width: 400px;
 background: #acc95f;
 color: #f4f4f4;
 border: 1px solid #fff;
 cursor: pointer;

} .accContent{ 

 margin: 0px auto;
 width: 400px;

} a, a:visited{ font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d; } </style> <title>Accordion with color transition example - solutoire.ru</title> </head> <body>

Accordion with color transition example - solutoire.ru

See the "Javascript used in this example" tab for the options used in this example.

Click me!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor enim, ultricies semper, ullamcorper at, mollis at, mauris.

Click me!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor enim, ultricies semper, ullamcorper at, mollis at, mauris.

Javascript used in this example

var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {

accordionTogglers = document.getElementsByClassName("accToggler");

accordionTogglers.each(function(toggler){
//remember the original color
toggler.origColor = toggler.getStyle("background-color");
//set the effect
toggler.fx = new Fx.Color(toggler, "background-color");
});

accordionContents = document.getElementsByClassName("accContent");

accordion = new Fx.Accordion(accordionTogglers,
accordionContents,{
//when an element is opened change the
//background color to blue
onActive: function(toggler){
toggler.fx.toColor("#6899CE");
},
onBackground: function(toggler){
//change the background color to the original (green)
//color when another toggler is pressed
toggler.setStyle("background-color", toggler.origColor);
}
});
}

CSS used in this example

.accToggler{
margin: 3px auto;
padding: 3px;
width: 400px;
background: #acc95f;
color: #f4f4f4;
border: 1px solid #fff;
cursor: pointer;
}

.accContent{
margin: 0px auto;
width: 400px;
}<code> </p> <p style="width: 400px; margin:10px auto;text-align:center"> ©2006 <a href="http://www.solutoire.ru/">solutoire.ru</a> </p> </body> </html> </source>

Another accordion panel

<A href="http://www.wbex.ru/Code/JavaScriptDownload/accordion1.zip">accordion1.zip( 46 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/Accordionwithcolortransitionexample.htm">Accordion with color transition example</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Accordion_Panel&oldid=1687»