Ce soir je suis genereux :)
Voici un bout de mon framework javascript :)
if (!Object.fireEvent)
Object.fireEvent = function(obj, eventName, arg)
{(obj['on' + eventName] || new Function).apply(obj, arg || [])}
var CSLib = {};
CSLib.Web = {};
CSLib.Web.UI = {};
CSLib.Web.Utils = {};
CSLib.Web.Utils.Cookies = {
// setValue(name, value, seconds, path, domain, secure)
setValue: function(name, value) {
var argv = arguments;
var argc = arguments.length;
if( argc > 2 )
{
var cdate = new Date();
var expires = new Date(cdate.getTime() + (argv[2]*1000));
}
else
{
var expires = null;
}
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape(value)
+ ((expires == null) ? "" : ("; expires=" + expires))
+ ((path == null) ? "" : ("; path=" + path))
+ ((domain == null) ? "" : ("; domain=" + domain))
+ ((secure == true) ? "; secure" : "");
},
// getValue(name)
getValue: function(name) {
if( document.cookie )
{
var arg = name + '=';
var i = 0;
while( i < document.cookie.length )
{
var j = i + arg.length;
if( document.cookie.substring(i, j) == arg )
{
var endstr = document.cookie.indexOf(';', j);
if( endstr == -1 )
{
endstr = document.cookie.length;
}
return unescape(document.cookie.substring(j, endstr));
}
i = document.cookie.indexOf(' ', i) + 1;
if( i == 0 ) break;
}
}
return null;
}
}
CSLib.Web.UI.Control = function()
{
this.fireEvent = function(eventName, arg)
{return Object.fireEvent(this, eventName, arg)}
}
CSLib.Web.UI.Control.prototype = Element;
CSLib.Web.UI.Container = function(id, opt)
{
var self = this;
// on etend les options par défaut avec les options passé en paramètre
//opt = Object.extend(CSLib.Config.Container, opt); // je vais pas donner tout mon code quand meme :)
this.options = opt;
this.elmt = $(id);
this.elmtTitle = self.elmt.childNodes[ 0 ];
while (self.elmtTitle.nodeType != 1)
self.elmtTitle = self.elmtTitle.nextSibling;
this.elmtContent = self.elmtTitle.nextSibling;
while (self.elmtContent.nodeType != 1)
self.elmtContent = self.elmtContent.nextSibling;
// Permet de construire le container
this.render = function()
{
// Action pour rendre le container expandable
if (opt.expandable)
CSLib.Web.UI.Behavior.Expand.call(this);
}
self.render();
}
CSLib.Web.UI.Container.prototype = new CSLib.Web.UI.Control();
CSLib.Web.UI.Behavior = {};
//Ne peut etre utilisé seulement dans le contexte d'un Container.
CSLib.Web.UI.Behavior.Expand = function()
{
// on remet ces variables dans le scope de la fonction, pour qu'elle soit utilisable dans
// l'event onclick car this se rapportera non plus à la classe en cours mais à l'element en cours
var elmt = this.elmt;
var elmtContent = this.elmtContent;
var elmtTitle = this.elmtTitle;
// Options globales des containers
var opt = this.options;
// Options interessante pour l'objet en cours
var _opt = opt.ExpandOptions;
var img = new Image();
//permet d'inserer le noeud image
new Insertion.Top(elmtTitle, img);
img.onclick = function()
{
_opt.expanded = !_opt.expanded;
changeImage();
//astuce pour que le click sur l'image soit inactif durant l'effet
var oldOnclick = this.onclick;
this.onclick = function(){}
Effect['Blind' + (_opt.expanded ? 'Down': 'Up')]
(elmtContent,
Object.extend({
scaleMode : 'contents',
afterFinish : function()
{img.onclick = oldOnclick;}
}, _opt.ExpandTransitionOption || {})
);
//Enregistrement du cookie
if (opt.useCookie)
CSLib.Web.Utils.Cookies.setValue('container' + elmt.id + 'ExpandState',
_opt.expanded);
};
//fonction servant seulement à changer l'image
var changeImage = function()
{
if (_opt.expanded)
{
img.src = adressedetonimage //CSLib.Resources.Image.Expanded;
img.title = textedetonimage //CSLib.Resources.getText('Close');
}
else
{
img.src = adressedetonimage //CSLib.Resources.Image.NotExpanded;
img.title = textedetonimage //CSLib.Resources.getText('Open');
}
}
//On charge l'etat à partir du cookie
if (opt.useCookie && !_opt.forceCookie)
{
var val = CSLib.Web.Utils.Cookies.getValue('container' + elmt.id + 'ExpandState');
if (val != null )
_opt.expanded = eval(val) ? true : false;
}
//on cache pour la premiere fois
if (!_opt.expanded)
Element.hide(elmtContent);
//on charge l'image la premiere fois
changeImage();
}
il te faudra telecharger le framework http://script.aculo.us (je n'ai fait que le completer)
et modifier un bug de la librairie prototype, la classe insertion, je met le debut de la classe en dessous
Abstract.Insertion.prototype = {
initialize: function(element, content) {
this.element = $(element);
this.content = content;
//<added by="Cyril" date="24 sept 05">permet d'ajouté des noeuds</added>
if (typeof(this.content) != 'string')
{
this.fragment = this.content;
this.insertContent();
return
}
Enfin pour finir, il te suffit de mettre d'instancier un nouvel objet Container dans la page et dire qu'il est expandable :)
Event.observe(window, 'load',
function()
{
var obj = new CSLib.Web.UI.Container('ctl00_Container1',
{
useCookie : true,
expandable : true,
ExpandOptions:
{
expanded: true,
forceCookie: false,
duration : .8
}
};
}, false);
Et enfin dans le code html voici ce que tu dois avoir :
<div class="Container" id="ctl00_Container1">
<div class="Title">coucou</div>
<div class="Content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In rhoncus, tortor eu
vulputate pulvinar, magna mi porttitor metus, non rutrum augue nisi non orci. Proin
laoreet varius dui. Nam ultrices lorem id odio. Nam rhoncus. Aenean porttitor, elit
rutrum sodales adipiscing, libero enim feugiat dui, vitae vehicula eros lectus vel
</div>
</div>
il faut absolument respecter la sémantique : avoir
div avec id
div pour le title
juste le titre c'est suffisant
div pour le contenu
ce qu'on veut comme contenu
J'ai un peu modifié certaines parties du fichier, normalement tu n'as
plus qu'a éditer 2 ou 3 bricoles pour modifier le texte et l'image,
j'ai modifié un peu, car sinon j'allais rajouter encore pas mal de
lignes ...
j'espere que ca te sera utile ... :)
le code est un petit peu lourd, mais il permet beaucoup de chose ! dans
cette configuration, quand tu vas cliquer, tu auras un petit effet qui
en 0.8 secondes (temps reglables dans les options de l'objet) tu verras
le div se réduire, et c'est multi browser cette chose la :)
Cyril -
MVS -
MCP ASP