Accordion est donc très utile car il permet de fabriquer des accordéons très facilement et en utilisant de surcroît les effets sympas de Scriptaculous. Il utilise en plus Prototype, que demander de plus !

Téléchargez la librairie accordéon
Voir mon exemple d’accordéon
Voir mon tutos pour le faire

Voir le site officiel de Accordion

Voici donc le tutorial, tutoriel concernant le superbe accordéon web 2.0 tendance que l’on voit chez tous les geeks qui se respectent ! 100% compatible Prototype et Scriptaculous. Pas grand chose à faire, suivez le guide :

Tout d’abord, téléchargez l’archive pour réaliser le tuto : téléchargez ici

Il contient toujours la même chose : les js, le fichier index ou demo, et le css. Ici, je vous ai laissé les exemples donnés avec l’archive officielle. La librairie s’appelle accordeon.js dans le dossier js et le css feuille_index.css.

Trois étapes :

1- Mettez le head pour les js et le css de votre accordéon :

Voir le code de mon head

2- Insérez votre accordéon dans le body :

Voir le code de mon accordéon

Les classes doivent porter le même nom que dans mon exemple car la librairie s’en sert.

3- Ajoutez votre code prototype pour initialiser l’accordéon :

Voir le code prototype gérant l’initialisation

Je rappelle que l’écouteur avec window et load est en fait le lancement d’une fonction lorsque le DOM est complètement chargé, c’est à dire que lorsque tous les divs, images et textes sont apparus.

C’est tout ! Pas très compliqué n’est-ce pas !

Voir mon exemple : la démo de l’accordéon

Tiny MCE est donc très utile car il permet de fabriquer des articles ou des contenus très facilement et utilisant de surcroît des fonctionnalités importantes digne de Word. D’ailleurs, un thème Word est inclus !

Rapide à installer, à charger et à utiliser, que demander de plus !

Voici une vidéo qui illustre le fonctionnement de cet éditeur:

Téléchargez l’éditeur Tiny
Voir mon exemple d’éditeur
Voir mon tutos pour le faire

Voir le site officiel de TinyMCE

Tout d’abord, téléchargez l’archive pour réaliser le tuto : téléchargez ici

Il contient toujours la même chose : les js, le fichier index ou demo, et le css. Ici, je vous ai laissé les exemples donnés avec l’archive officielle dans le dossier editor. La librairie s’appelle tiny_mce.js dans le dossier editor/jscripts/tiny_mce/ et le css feuille_editer.css.

Trois étapes :

1- Mettez le head pour les js et initialisez votre éditeur en choisissant la richesse de votre éditeur :

Voir le code de mon head

Petites explications : Chaque ligne de boutons est donné par theme_advanced_buttonsX où X est la position de la ligne. Ensuite vous insérez les fonctionnalités que vous désirez : bold (mettre en gras), justify (justifier le texte)… Je vais pas vous apprendre Word ! Si ?

2- Insérez votre formulaire qui deviendra alors votre éditeur :

Voir le code de mon formulaire

3- Ajoutez votre code prototype pour gérer la suite : lorsque l’internaute clique sur Envoyer :

Voir le code prototype gérant l’envoie du contenu

Petit cours sur les écouteurs
J’ai donc mis un écouteur sur le bouton et encoder, ré-encoder le tout pour pouvoir les passer en Ajax.

C’est tout ! Pas très compliqué n’est-ce pas !

Voir mon exemple : la démo de l’éditeur TinyMCE

Litbox permet l’ouverture d’une légère fenêtre en sur-impression. Quelle différence puisque d’autres librairies le font ? Celle-ci n’est pas trop intrusive pour l’internaute puisque l’on peut enlever le fond, elle permet d’y mettre tout ce que l’on veut, de la simple page à l’alerte classique en passant pour une fenêtre de confirmation.

Voici une vidéo qui illustre le fonctionnement de cette librairie :

Téléchargez le module Litbox
Voir mon exemple de Litbox
Voir mon tutos pour le faire

Voir le site officiel de Litbox