Gularu.fr
Cueillir l'actu, l'insolite du web et d'autres trucs
Mot-clé ‘tutoriel’
Voici un truc vraiment utile pour frimer sur vos portfolios sans rien connaître en javascript : l’accordéon dynamique. Grâce à cette librairie toute faite, vos sites vont prendre un coup de jeune !
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
Publié dans Ajax
Tutorial : Web 2.0, Ajax, créer un accordéon, accordion dynamique et classeLe 24 fév 2008
Partager TweetNouvelle version du post en cliquant ici : http://www.gularu.fr/blog/?p=403
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 :
2- Insérez votre accordéon dans le body :
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
Publié dans Informatique, Tutoriaux
Voici un truc vraiment utile pour vos sites 2.0 : l’éditeur WYWIWYS (What You Write Is What You Got). Grâce à cette librairie toute faite, plus besoin de s’ennuyer à créer des formulaires d’édition pour la plupart à chier, il faut dire la vérité aux gens 
.
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
Publié dans Ajax
Tutorial : Web 2.0, Ajax, créer un éditeur de contenu pour un site internet communautaireLe 22 fév 2008
Partager TweetVoici donc le tutorial, tutoriel concernant l’éditeur qui va vous permettre d’insérer dans vos bases de données des contenus un peu plus classe que du texte issu de textearea basiques ! Tout est géré par la librairie TinyMCE, vous allez voir c’est un jeu d’enfant de s’en servir !
Suivez le chemin et au boulot !
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 :
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
Publié dans Informatique, Tutoriaux
Voici un petit bijou que je vous présente cette semaine : Litbox. C’est une librairie très utile pour ceux qui voit, comme moi je le pense, le début d’une longue épopée avec l’ajax et le renouveau du javascript.
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
Commentaires fermés
Publié dans Ajax, Informatique
Catégories
—
Liens
—
À propos de Gularu.fr
—
Dans ce blog vous trouverez votre bonheur si vous êtes webmaster, web-designer, web tout court. Mais parfois je lance des petits coups de gueule politiques et donne mon avis sur des sujets souvent inutiles mais drôles...