Dator Blog

ObjectRange ou objets rangés sont présents dans la librairie Prototype.

Sous ce joli nom se cache une fonctionnalité vraiment pratique pour tous les développeurs. Cette fonctionnalité permet de spécifier un intervalle et la librairie recompose les parties de cet interval.

Comme on dis souvent (surtout en programmation), un exemple vaut mieux qu’un long discours.

/*
On lance la fonction $R qui prend le minimum et le maximum.
Ensuite on transforme le retour dans un tableau avec $A comme Array
et on extrait chaque élément par une virgule.
*/
$A($R(0, 5)).join(', ');
// on nous retourne donc '0, 1, 2, 3, 4, 5'

Pratique non?

Maintenant, pour savoir si un objet rangé contient un élément, on utilise :

// On cherche si 5 fait partie de l'intervalle ouvert  ([0;5]).
$R(0, 5).include(5);
// Nous retourne true.

//On cherche si 5 fait partie de l'intervalle fermé à droite ([0;5[)
$R(0,5,true).include(5);
// Nous retourne false

De plus, cette fonction marche aussi avec les caractères.

$A($R('aa', 'ad')).each(function(value) {
// Retourne aa, ab, ac, ad
}

Cette fonction est vraiment très pratique pour tous les développeurs qui souhaitent utiliser des suites logiques de nombre ou de lettres.

• 0 commentaire

Ajax Librairies est un module développé par Google pour permettre de simplifier les appels aux différents framework Javascript les plus connus comme :

• jQuery
• Prototype
• Scriptaculous
• Mootools
• Dojo

Google simplifie largement le travail car, pour appeler une librairie, il faut utiliser :

Et ensuite :

google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Dans le premier paramètre de la méthode load, vous mettez le nom de la librairie voulue et dans le deuxième, la version.Simple non?

De plus, vous pouvez spécifier le mode de compression de la librairie voulue (uniquement pour Mootools, Dojo et jQuery).
Pour avoir la version non compressé, il suffit de rajouter :

google.load("jquery", "1.2.3",{uncompressed:true});
google.load("mootools", "1.11",{uncompressed:true});
google.load("dojo", "1.1.1",{uncompressed:true});

Google à mis cela au point pour simplifier les accès au framework Javascript et pour facilité le versionning.

• 1 commentaire

Vous en avez marre d’inclure Prototype et Scriptaculous dans vos pages de vos sites web ?

Des développeurs ont compacter ces deux librairies afin d’inclure dans vos pages qu’un seul fichier javascript.

Pratique non?

Voici le site du projet : Google Groupe pour Prototype Core

En ajoutant ce fichier Protoculous.js dans vos pages vous aurez accès au propriété de Prototype ainsi qu’au effets graphiques de Scriptaculous .

• 0 commentaire

Il y a longtemps que je voulais faire un petit script permettant de changer le CSS de son site sans avoir a recharger la page.

Je me suis documenter sur Prototype pour savoir comment manipuler les DOMs et je suis arriver à un petit script … vraiment petit !

Déjà, il faut créer votre page HTML en pensant à bien ajouter prototype dans les javascript.

Ensuite il faut réaliser vos CSS afin de pouvoir changer les couleurs de vos sites comme vous voulez

et enfin il faut créer un petit bout de javascript (mais vraiment petit) mais qui possède une puissance assez conséquente !

Dans un premier temps, il faut identifier la premier css inclut dans votre site (le principal) :

$$('link[rel=stylesheet]')

avec ce code on peut recherche les DOMs avec les sélecteurs CSS, on va cherche les links qui ont un rel égale à stylesheet .

Ensuite on va transformer cette liste en tableau pour avoir la méthode qui permet de récupérer le premier élément de ce tableau (le CSS principal) :

$A($$('link[rel=stylesheet]')).first()

$A permet de transformer les éléments retourner en type Enumérable et de pouvoir chercher le premier élément avec la méthode first()

Enfin il nous suffit de changer l’attribut href de cet élément par le nouveau CSS

$A($$('link[rel=stylesheet]')).first().setAttribute('href','css/monstyle.css');

Ici, avec setAttribute on change l’attribut href avec le deuxième paramètre

Finalement, on peut aussi créer une fonction très simple, afin de pouvoir spécifier dynamiquement le CSS comme ceci :

function change_css(style){
	$A($$('link[rel=stylesheet]')).first().setAttribute('href','css/'+style+'.css');
}

Voici le résultat : Changer de CSS avec Javascript et Prototype démonstration
Avec ce mini bout de code, à vous les sites avec plusieurs styles !

• 2 commentaires

Aujourd’hui nous allons voir comment réaliser des infobulles en javascript avec notre framework préféré : Prototype !

C’est quoi une infobulle ?

Les infobulles sont des petites bulles de texte qui apparaissent à un moment donné, par exemple quand on passe sa sourie sur un lien, on peut faire apparaitre la description du site.

En fouillant sur le web, je n’ai trouvé qu’un seul plugins simpatique à utiliser : Prototip

Vous pouvez d’ailleurs consulter des exemples dans la section démonstration du site de Prototip.

Comment l’utiliser ?

Pour utiliser ce framework, il suffit simplement d’inclure vos 3 fichiers javascripts et le fichier css :

Il ne vous reste plus qu’a utiliser le Javascript aussi simplement que d’habitude :

new Tip('monId', 'Afficher ce contenu au passage de la sourie sur cette div');

Et voila on aura une belle infobulle quand on passera la sourie sur la div monId.

Je peux ajouter des effets ?

Bien évidemment ! , il suffit de rajouter les options à la suite du contenu de la bulle.

Effet d’apparition :

new Tip('monId', 'Afficher ce contenu au passage de la sourie sur cette div',
{ effect: 'appear' }
);

Ajouter un titre :

new Tip('monId', 'Afficher ce contenu au passage de la sourie sur cette div',
{ title: 'montitre}
);

et encore bien d’autre petit effets modifiable à volonté !

• 5 commentaires

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