Dator Blog

Voici un nouveau plugin pour Prototype et Scriptaculous !

Ce plugin vous permet de réalisé des accordéons en javascript très simplement comme cela :

Lien vers la démo de l’accordéon

Dans un premier temps, il faut vous munir de Prototype et de Scriptaculous. Ensuite il vous faut le Javascript pour les accordéons

Ensuite il faut inclure ces trois fichiers dans votre page HTML de cette façon :

Ensuite les balises pour utiliser correctement le script:

Mon titre
...
Mon deuxième titer
...

et le code javascript :

// Accordéon vertical (basique)
var verticalAccordion = new accordion('#container_acc');

// Accordéon horizontal
var horizontalAccordion = new accordion('#container_acc', {
classNames : {
// classe css de la zone cliquable
toggle : 'horizontal_accordion_toggle',
// classe css de la zone cliquable active
toggleActive : 'horizontal_accordion_toggle_active',
// classe css de la zone de contenu
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525 // La taille par défaut
},
direction : 'horizontal' // pour un accordéon horizontal !
});

Et voila un joli accordéon comme dans l’exemple !

Bon courage

Edition : Voici le patch à appliquer pour que le script marche avec la nouvelle version de PrototypeJS :

• 10 commentaires

Le premier screencast de Dator.fr est arrivé ! Je vais vous expliquer comment utiliser Prototype, Scriptaculous, PHP et une base de données pour réaliser un moteur de recherche en Ajax !

Tout est expliqué dans la vidéo que je viens de finir, je vous explique comment paramétrer le javascript afin de pouvoir envoyer des requêtes AJAX.

La vidéo est ici !

Je vous laisse me dire si ce screencast est réussi … ou pas. Si vous préférez les tutoriaux écrits plutôt que vidéos ? enfin tout ce que vous voulez !

Bonne vidéo et bon développement à tous !

• 20 commentaires

Aujourd’hui je vais vous présenter une librairie Javascript (et oui … encore !).
Il s’agit de LightBox, le plugin de référence pour vos images.

En faite cette librairie permet d’ajouter, sur les liens des agrandis de vos images, un effet d’agrandissement sur la même page.

Cette librairie fonctionne sur la base de Prototype et de Scriptaculous (2 librairies que je vous ai déjà présenter précédemment).

Voici un exemple

Comme tu as pu voir, l’effet proposé fait très professionnel et en plus si vous avez une galerie d’image, tu vas voir apparaitre « Suivant»  ou « Précédent»  pour naviguer entre les images.

Lire le reste de cet article »

• 1 commentaire

Bonjour à tous,

Aujourd’hui je vais vous présenter ModalBox , une boite de dialogue entièrement codé en Javascript et respectant les « normes»  du Web 2.0.

Ce petit bijoux est basé sur Prototype JS , un des meilleurs framework JS sur le web , et Scriptaculous , une librairie d’effets Javascript .

De façon très simple, ajouter à vos pages des boites de dialogues à votre site internet .

De plus quand ces boites sont activés, la page qui est derrière deviens non cliquable (depuis le temps que je cherche à faire ça ! (prochainement sur www.dator.fr pour la petite astuce ) ! Ces boites ressemble à cela (cliquez sur le lien ) : ModalBox Exemple

Pour que la Modal Box fonctionne correctement, n’oubliez pas d’inclure ces 4 éléments dans votre source HTML :

1. Le css de la modalbox (modalbox.css).
2. La librairie Prototype (prototype.js).
3. La librairie Scriptaculous (scriptaculous.js?load=effects (pour charger les effets)).
4. Le javascript de ModalBox (modalbox.js).

Avec ces 4 éléments il est très simple de créer ces propres boites modales.

Je vous met le petit script a disposition ici : http://www.box.net/shared/exbvmv2o8k

(l’ensemble du code utilisé est commenté pour plus de clarté).

Et le lien pour télécharger la librairie ModalBox : http://www.wildbit.com/labs/modalbox/
Bon Javascript à tous !

• 15 commentaires