Bonjour à tous,
pour la réalisation d'un site Web, j'ai utilisé le script d'un menu accordeon au lien suivant :
http://www.dator.fr/un-accordeon-avec-prototype-et-scriptaculous/
L'avantage de ce script menu accordeon est le fait que l'on peut introduire des sous-menus accordeons (verticaux) dans le menu accordeon principal.
J'ai bien sûr adapté mon code, mes css à contenu, etc. Et j'ai également introduit deux sous-menus accordeons dans le principal. Tout marche très bien sous Firefox, mais sous Internet Explorer, seul un des deux sous-menus accordeons fonctionnent. J'ai cherché des infos sur le Net à ce sujet depuis plusieurs jours, mais je n'ai rien trouvé en ce qui concerne ce type de menus et les problèmes de comptabilité entre les navigateurs.
Voici ma page html :
Voici le javascript qui déclare mes entités :
Et voici le javascript qui assure en partie le fonctionnement de l'accordeon :
Toutes les propositions sont les bienvenues!!!!!!
Merci à tous!
pour la réalisation d'un site Web, j'ai utilisé le script d'un menu accordeon au lien suivant :
http://www.dator.fr/un-accordeon-avec-prototype-et-scriptaculous/
L'avantage de ce script menu accordeon est le fait que l'on peut introduire des sous-menus accordeons (verticaux) dans le menu accordeon principal.
J'ai bien sûr adapté mon code, mes css à contenu, etc. Et j'ai également introduit deux sous-menus accordeons dans le principal. Tout marche très bien sous Firefox, mais sous Internet Explorer, seul un des deux sous-menus accordeons fonctionnent. J'ai cherché des infos sur le Net à ce sujet depuis plusieurs jours, mais je n'ai rien trouvé en ce qui concerne ce type de menus et les problèmes de comptabilité entre les navigateurs.
Voici ma page html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<title>pazYcomedias</title>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="accordion, javascript accordion, scriptaculous" />
<meta name="description" content="The ultimate modal window system, LightWindow, allows you to build your own theem, create mixed media galleries including flash, quictkime and images. Through a variety of parameters this system can do it all and recreate any other system out there!" />
<meta name="robots" content="index, follow" />
<!-- JavaScript -->
<!-- <script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,accordion.js,code_highlighter.js,javascript.js,html.js"></script> -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<script type="text/javascript" src="javascript/code_highlighter.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/html.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<link rel="stylesheet" href="lightwindow.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/bulletlink.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
</head>
<body>
<div id="container">
<div id="vertical_container" >
<h1 class="accordion_toggle">noticias</h1>
<div class="accordion_content">
<h2>noticias</h2>
<p>
jheghejghehgjhjerg
</p>
</div>
<h1 class="accordion_toggle">espacio</h1>
<div class="accordion_content">
<h2>espacio</h2>
<p>
kjerkjkjrkjkrej
</p>
</div>
<h1 class="accordion_toggle">exposiciones</h1>
<div class="accordion_content">
<h2>exposiciones</h2>
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle"><a href="#" class="ddbullet" rel="bulletimg1">Exposicion actual</a></h3>
<div class="vertical_accordion_content">
<p>
rhgrjgojrjegk
</p>
</div>
<h3 class="vertical_accordion_toggle">
<a href="#" class="ddbullet" rel="bulletimg1">Exposiciones 2008</a>
</h3>
<div class="vertical_accordion_content">
<p>
kjgkrjgkjrkgjrkjgk
</p>
</div>
<h3 class="vertical_accordion_toggle">
<a href="#" class="ddbullet" rel="bulletimg1">Exposiciones 2007</a>
</h3>
<div class="vertical_accordion_content">
<p>
jhghrjghjghjghj
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">artistas</h1>
<div class="accordion_content">
<h2>artistas</h2>
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">
<a href="#" class="ddbullet" rel="bulletimg1">dfjsdfhkjd</a>
</h3>
<div class="vertical_accordion_content">
<p>
<a href="img/hierro-fundido.jpg" class="lightwindow page-options" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="hierro-fundido" caption="Dozen (Docena). 2005. Hierro forjado. 45 x 30 x 35cm.">obras</a> | <a href="" target="_blank">curriculum vitae</a>
<a href="img/la-merienda-vertical-baja.jpg" class="lightwindow hidden" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="A Merienda Vertical Baja" caption="La merienda. 2005. Cera y plato de cerámica. 28 x 28cm." hidden></a>
<a href="img/media-docenahombres-de-medi.jpg" class="lightwindow hidden" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="A Merienda Vertical Baja" caption="Media docena de hombres de medio litro. 2005. Fotografía sobre aluminio. 70 x 100cm." hidden></a>
</p>
</div>
<h3 class="vertical_accordion_toggle">
<a href="#" class="ddbullet" rel="bulletimg1">dnjhdkgf</a>
</h3>
<div class="vertical_accordion_content">
<p>
<a href="img/hierro-fundido.jpg" class="lightwindow page-options" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="hierro-fundido" caption="Dozen (Docena). 2005. Hierro forjado. 45 x 30 x 35cm.">obras</a> | <a href="" target="_blank">curriculum vitae</a>
<a href="img/la-merienda-vertical-baja.jpg" class="lightwindow hidden" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="A Merienda Vertical Baja" caption="La merienda. 2005. Cera y plato de cerámica. 28 x 28cm." hidden></a>
<a href="img/media-docenahombres-de-medi.jpg" class="lightwindow hidden" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="A Merienda Vertical Baja" caption="Media docena de hombres de medio litro. 2005. Fotografía sobre aluminio. 70 x 100cm." hidden></a>
</p>
</div>
<h3 class="vertical_accordion_toggle">
<a href="#" class="ddbullet" rel="bulletimg1">jkhdhfdjkhk</a>
</h3>
<div class="vertical_accordion_content">
<p>
<a href="img/hierro-fundido.jpg" class="lightwindow page-options" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="hierro-fundido" caption="Dozen (Docena). 2005. Hierro forjado. 45 x 30 x 35cm.">obras</a> | <a href="" target="_blank">curriculum vitae</a>
<a href="img/la-merienda-vertical-baja.jpg" class="lightwindow hidden" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="A Merienda Vertical Baja" caption="La merienda. 2005. Cera y plato de cerámica. 28 x 28cm." hidden></a>
<a href="img/media-docenahombres-de-medi.jpg" class="lightwindow hidden" title="Adolfo Siurana" rel="Artistas[Adolfo Siurana]" title="A Merienda Vertical Baja" caption="Media docena de hombres de medio litro. 2005. Fotografía sobre aluminio. 70 x 100cm." hidden></a>
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">contacto</h1>
<div class="accordion_content">
<h2>contacto</h2>
<div id="horizontal_container"></div>
</div>
</div>
</body>
</html>
Voici le javascript qui déclare mes entités :
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
var bottomAccordion = new accordion('vertical_container');
var nestedVerticalAccordion = new accordion('vertical_nested_container', {
classNames : {
toggle : 'vertical_accordion_toggle',
toggleActive : 'vertical_accordion_toggle_active',
content : 'vertical_accordion_content'
}
});
// Open first one
bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
// Open second one
topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[0]);
}
Et voici le javascript qui assure en partie le fonctionnement de l'accordeon :
if (typeof Effect == 'undefined')
throw("accordion.js requires including script.aculo.us' effects.js library!");
var accordion = Class.create();
accordion.prototype = {
//
// Setup the Variables
//
showAccordion : null,
currentAccordion : null,
duration : null,
effects : [],
animating : false,
//
// Initialize the accordions
//
initialize: function(container, options) {
if (!$(container)) {
throw(container+" doesn't exist!");
return false;
}
this.options = Object.extend({
resizeSpeed : 8,
classNames : {
toggle : 'accordion_toggle',
toggleActive : 'accordion_toggle_active',
content : 'accordion_content'
},
defaultSize : {
height : null,
width : null
},
direction : 'vertical',
onEvent : 'click'
}, options || {});
this.duration = ((11-this.options.resizeSpeed)*0.15);
var accordions = $$('#'+container+' .'+this.options.classNames.toggle);
accordions.each(function(accordion) {
Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
if (this.options.onEvent == 'click') {
accordion.onclick = function() {return false;};
}
if (this.options.direction == 'horizontal') {
var options = $H({width: '0px'});
} else {
var options = $H({height: '0px'});
}
options.merge({display: 'none'});
this.currentAccordion = $(accordion.next(0)).setStyle(options);
}.bind(this));
},
//
// Activate an accordion
//
activate : function(accordion) {
if (this.animating) {
return false;
}
this.effects = [];
this.currentAccordion = $(accordion.next(0));
this.currentAccordion.setStyle({
display: 'block'
});
this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);
if (this.options.direction == 'horizontal') {
this.scaling = $H({
scaleX: true,
scaleY: false
});
} else {
this.scaling = $H({
scaleX: false,
scaleY: true
});
}
if (this.currentAccordion == this.showAccordion) {
this.deactivate();
} else {
this._handleAccordion();
}
},
//
// Deactivate an active accordion
//
deactivate : function() {
var options = $H({
duration: this.duration,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
queue: {
position: 'end',
scope: 'accordionAnimation'
},
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
},
afterFinish: function() {
this.showAccordion.setStyle({
height: 'auto',
display: 'none'
});
this.showAccordion = null;
this.animating = false;
}.bind(this)
});
options.merge(this.scaling);
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
new Effect.Scale(this.showAccordion, 0, options);
},
//
// Handle the open/close actions of the accordion
//
_handleAccordion : function() {
var options = $H({
sync: true,
scaleFrom: 0,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
}
});
options.merge(this.scaling);
this.effects.push(
new Effect.Scale(this.currentAccordion, 100, options)
);
if (this.showAccordion) {
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
options = $H({
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
});
options.merge(this.scaling);
this.effects.push(
new Effect.Scale(this.showAccordion, 0, options)
);
}
new Effect.Parallel(this.effects, {
duration: this.duration,
queue: {
position: 'end',
scope: 'accordionAnimation'
},
beforeStart: function() {
this.animating = true;
}.bind(this),
afterFinish: function() {
if (this.showAccordion) {
this.showAccordion.setStyle({
display: 'none'
});
}
$(this.currentAccordion).setStyle({
height: 'auto'
});
this.showAccordion = this.currentAccordion;
this.animating = false;
}.bind(this)
});
}
}
Toutes les propositions sont les bienvenues!!!!!!
Merci à tous!