Articles taggés avec 'prototype.js'


Shadowbox 3.0 beta

Il a été libéré dès maintenant (merci à l'auteur d'alerte Michael Jackson JI ) la version 3.0 bêta Shadowbox.js . En plus de la conception du site nouveau ici, c'est les changements les plus importants dans le présent communiqué avant:

En savoir plus ...

Camelize, CamelCase

Comme on le voit dans le poste Variété de codage et le codage des approches qu'un développeur peut avoir à résoudre un problème sont multiples et diverses pour le même langage de programmation utilisé. Voici comment quelques-uns des principaux frameworks JavaScript ont résolu une simple fonction de CamelCase :

Prototype.js

Prototype.js , version 1.6.0.3, propose explicitement une méthode camelize() pour rendre le camelcase sur une chaîne de caractères. Démarche de l'auteur est assez simple et le code est auto-explicatif. Dans ce cas, il n'a pas été fait aucun usage de l'expression régulière!

1
2
3
4
5
6
7
8
9
10
11
12
13
( ) { camelize: function () {
this . split ( '-' ) , len = parts. length ; . pièces var = cette scission («-»), len = parties de longueur;.
len == 1 ) return parts [ 0 ] ; si les pièces de retour (len == 1) [0];

this . charAt ( 0 ) == '-' camelized var = ce charAt (0) ==. '-'
0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Pièces [0]. CharAt (0). ToUpperCase () + pièces [0]. Substring (1)
0 ] ; : Pièces [0];

var i = 1 ; i < len ; i ++ ) for (var i = 1, i <len; i + +)
i ] . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = parties [i] charAt (0) toUpperCase () + pièces [i] substring (1)...;

retour camelized;
}

En savoir plus ...

jQuery contre tout le monde: un point de repère avec 5 navigateur

image Un bon développeur n'a aucun problème à passer d'un langage de programmation à l'autre. Le choix de se concentrer sur une langue, le cadre particulier ou environnement de développement, est plus dicté par la disponibilité de temps et le type de travail qui se fait. Cependant, un facteur important qui peut influer sur le choix de «cadre», telle est la sympathie et l'affection que peut mûrir au fil du temps.
Plus précisément, je voulais analyser quelques-uns - pas tous - des cadres Javascript disponibles aujourd'hui, parce que même «conseillé» de prendre un coup d'oeil particulier à jQuery .
Les créateurs de mootools (l'un des principaux frameworks JavaScript) ont mis à disposition un outil pour exécuter un test de vitesse et de la validité de cinq frameworks JavaScript bien connus: SlickSpeed ​​. Ce test, le résultat n'est pas du tout évident, est important que le travail sur les cadres des clients Javascript secondaires, qui sont effectuées par notre navigateur. C'est précisément pour cette raison que certains trouvent Safari plus rapide que Internet Explorer ou Google Chrome plus rapide que Firefox . Toutefois, cela dépend souvent du type de page que vous consultez. En effet, il peut arriver qu'un site en particulier est vraiment "rapide" lorsqu'il est affiché dans Safari, mais cela ne signifie pas que «tous les sites" sera plus rapide avec Safari! Évidemment, cela est vrai pour n'importe quel autre navigateur.

L'indice de référence

Dans les tests que j'ai fait avec SlickSpeed ​​j'ai comparé les navigateurs disponibles sur ma machine (Windows Vista 64 bits Utilmate - Intel Core 2 Quad 2,4 GHz avec 8 Go de RAM).
Malheureusement, les tests ne sont pas en mesure de fonctionner avec Internet Explorer 7, que la voiture s'est écrasé, allant même hors d'échelle avec les résultats! Encore une fois, félicitations Microsoft.
Je crercato de maintenir le même statut de l'ordinateur au cours de l'essai, l'ouverture du navigateur, et non individuellement par l'envoi d'aucun autre processus en cours d'exécution.

Remarque: Si vous avez envie vous aussi exécuter une ou plusieurs de ces tests, vous pouvez commenter sur ce post en cas de résultats "étranges" et différent.

image

Google Chrome a été très rapide, avec une valeur de 68 (moyenne) dans l'essai avec jQuery . Le plus lent, cependant, était Flock , même s'il vient de la même «mère» de Mozilla. Cette mauvaise performance de Flock est vraiment curieux que ses coupe les réseaux sociaux, car c'est précisément le Web social Network 2.0 pour profiter des nombreux frameworks JavaScript disponibles, de manière à fournir une expérience de navigation réellement innovante et de l'interaction.
Étonnamment bat FireFox et Opera dispose également d'un «joli petit, même obtenir un 74 dans l'exercice de Dojo ! FireFox et Safari, après tout, sont semblables, avec Safari plus rapide dans les essais avec Mootools et jQuery.

Quel cadre choisir?

Si nous ne nous soucions de tester la rapidité d'exécution et nous ne nous soucions dimesion en kilo-octets de le même cadre, la réponse peut être "ce que vous voulez" ou, si vous voulez, "ce que vous savez mieux ou est plus harmonieuse avec votre style de programmation. "
En fin de compte, ces cadres se penchera tout un peu "(voir par exemple l'utilisation de $), en dépit de quelques différences importantes et substantielles qui peuvent sauter aux yeux d'un expert ou vraiment poussé à l'utilisation d'une bibliothèque particulière. En principe, en fait, tout ce qui peut être fait avec jQuery, par exemple, vous pouvez faire bien avec mootools ou prototype! Si jQuery a une syntaxe très compact, comme toutes les méthodes retournent toujours la base objet jQuery, créant ainsi d'interminables rangées de oggetto.metodo().metodo().metodo()... a dit que ce n'est pas du tout coûte une force, en particulier pour ceux qui auront à déboguer!
Bibliothèques comme prototype.js péché, peut-être en l'absence d'effets, même simples, ce qui oblige le développeur à mettre en œuvre, une entreprise dérivée scriptaculous.js , lourds et éloignées de la première bibliothèque choix.

Un exemple

Précisément pour cette raison, par exemple, m'a amené à remplacer le prototype couplé / scriptaculous avec jQuery pour créer des panneaux interactifs ou undolog.com animation ici dans la barre latérale. En effet, même en utilisant l'API Google pour importer des bibliothèques, est un chargement de déchets toutes les bibliothèques et scriptaculous pour un slideUp slideDown. Pour plus d'informations et un exemple, voici le code Javascript comme il a été couplé avec le prototype / scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototype / Scriptaculous
) . each ( $ $ ('H2.dropdown'). Chaque (
element ) { fonction (element) {
= "pointer" ; .. élément de style curseur = "pointeur";
'click' , élément. observer («clic»,
event ) { function (event) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () le style d'affichage == "") Effet nouvelle BlindUp (this. next (), {duration: 0.5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effet chose de nouveau BlindDown (this. next (), {duration: 0.3}).;
event ) ; . Événement Stop (événement);
}
)
}
);

et il est maintenant avec jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Chaque (
i ) { fonction de (i) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (Ce). Css («curseur», «pointeur»). Cliquez sur (
fonction () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) suivante () est (': hidden')) $ (this) next () slideDown (); else $ (this) next () slideUp ();....
}
);
}
);

Dans l'ensemble, un peu plus près, je ne crois pas qu'il existe une grande différence! Mais comme je l'ai déjà dit ... la question est «bien» de goût personnel.

En savoir plus ...

jQuery relooking

Juste cette semaine (sous la direction ...) J'ai été la navigation sur jQuery , une grande bibliothèque dans le style de prototype.js , les scriptaculous.js , les MooTools , pour ainsi dire ... et c'est aujourd'hui l'ensemble du site a été entièrement repensé:

image

Grande commencer à élargir mes horizons sur ce type de bibliothèques! Peu être publier quelques articles intéressants, en particulier sur les différences entre jQuery bibliothèques et d'autres "similaires".

En savoir plus ...

Accordéon simple avec la classe USimpleTabStrip

La classe USimpleTabStrip , logé dans TabStrip simple discret , peut également être utilisé pour réaliser un menu simple Accordéon .
offerti da Scriptaculous : Utilisation des effets de BlindUp() et BlindDown() offert par Scriptaculous :

1
2
3
4
5
6
7
8
9
10
fonction init () {
USimpleTabStrip ( ) ; Uts USimpleTabStrip = new ();
; uts init ().;
function ( e ) { uts. OnShow = function (e) {
( e ) ; . Effet nouvelle BlindDown (s);
}
function ( e ) { uts. onHide = function (e) {
( e ) ; . Effet nouvelle BlindUp (s);
}
}

Et en remplaçant les éléments HTML ( source HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "accordéon">
"#acc1" > Accordion 1 < / a > < une href = "# ACC1"> Accordéon 1 </ une >
"acc1" >< / a > < une name = "ACC1"> </ une >
< div >
h1 > < h1 > Contenu n ° 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < une href = "# ACC2"> Accordéon 2 </ une >
"acc2" >< / a > < une name = "ACC2"> </ une >
< div >
h1 > < h1 > Contenu # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < une href = "# ACC3"> Accordéon 3 </ une >
"acc3" >< / a > < une name = "ACC3"> </ une >
< div >
h1 > < h1 > # 3 Contenu </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

</ div >

Vous obtenez un menu simple Accordéon qui peut être utilisé d'une manière extrêmement rapide.

En savoir plus ...

Discret TabStrip simple

USimpleTabStrip JavaScript discrète est d'améliorer l'ancre du lien classique (encore) à l'intérieur d'une page HTML. Cette source est une amélioration de la fonction présentée dans TabStrip discret . Dans cette version, ainsi que d'aligner le code pour la version 1.6 de prototype.js a créé une véritable classe pour gérer la TabStrip. Le communiqué présenté ici est très simple et direct. Son travail principal réside dans l'ajout d'un événement de clic pour l'ancre du lien normal. Les styles CSS sont pas présentées aussi, juste pour laisser le maximum de liberté d'action, mais vous pouvez obtenir un TabStrip efficace avec quelques lignes de code supplémentaires CSS, voir Ajout de styles CSS ci-dessous.

HTML Code

La classe USimpleTabStrip travaille sur un code HTML simple, sftuttando l'ancre ( &lt;a name&gt;&lt;/a&gt; ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<-! Simple liste de liens sur la page ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < les > < une href = "# Tbs1"> Lien 1 </ une > </ voyage >
= "#tbs2" > Link 2 < / a >< / li > < les > < une href = "# TBS2"> Lien 2 </ une > </ voyage >
= "#tbs3" > Link 3 < / a >< / li > < les > < une href = "# tbs3"> Lien 3 </ une > </ voyage >
</ ul >

<-! Blocs / TABS ->

"tbs1" >< / a > < une name = "Tbs1"> </ une >
< div >
h1 > < h1 > Annonce n ° 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < une name = "TBS2"> </ une >
< div >
h1 > < h1 > Annonce n ° 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < une name = "tbs3"> </ une >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. La balise div juste en dessous de l'ancre a travailler comme un récipient.

En savoir plus ...

Techniques de remplacement de texte dans Flash

La technique de remplacement de texte que je présente aujourd'hui est, sous certains aspects, vraiment intéressant. Contrairement à la substitution d'image classique est pour utiliser les CSS , cette technique utilise une animation Flash pour remplacer les titres de notre site. En dépit d'être un peu plus articulée, car elle nécessite la création d'une animation Flash et l'utilisation de JavaScript, permet d'obtenir une série d'avantages non indifférents:

  • Maintient l'accessibilité »pour le site en utilisant un vrai-discret Javascript afin que les robots et araignées continuer à voir la page au format HTML simple et correcte
  • Il ne nécessite pas la création de n par des titres d'image n. Il suffit d'un seul film pour remplacer tous les titres de notre site, avec une économie considérable en termes de téléchargement
  • Il vous permet de créer des titres simples, mais aussi avec la police ne sont normalement pas utilisés sur le Web
  • Le texte peut être rendu en HTML, grâce à des fonctionnalités de Flash
  • Le texte est sélectionnable
  • Être une animation Flash, vous pouvez insérer n'importe quel type d'interactivité et des animations

Vous noterez aussi que dans cette procédure sont pratiquement pas CSS pris en compte!

En savoir plus ...

Google AJAX API des bibliothèques: une percée pour les développeurs

Bibliothèques AJAX API Google , dans la dernière période, a publié une multitude d'outils pour les développeurs, constamment à jour leurs versions. Détient maintenant un accord avec AJAX populaire, et non seulement de centraliser la distribution de la bibliothèque jQuery , Prototype , script.aculo.us , MooTools et dojo !

En pratique, il est possible d'accéder à ces bibliothèques s'appuyant sur ​​l'infrastructure et le réseau Google, avec des avantages significatifs en termes de rapidité et de sécurité.

La vitesse, le chargement, est garanti par le même réseau que Google, en plus de fournir des car si une structure de serveur distribué, permet (par défaut) le comprimé de chargement (gzip / minify) des bibliothèques. Le Google hébergement le plus proche de la demande sera utilisée pour envoyer le code et, s'il n'est pas satisfait ou temporairement, Google fournira le réseau, cependant, en envoyant le code Javascript!

En savoir plus ...

Google AJAX Langue API et prototype.js

Après avoir vu le fonctionnement de l' API Google AJAX a eu lieu pour moi une autre façon de traduire nos pages web à l'aide en temps réel prototype.js , vous pouvez marquer les balises HTML que nous voulons traduire, au lieu de soumettre l'ensemble du document à la traduction. : Pour marquer les balises HTML que j'ai utilisé pour traduire l'attribut rel , fixant sa valeur à translate :

1
"translate" > Questo testo deve essere tradotto < / p > < p rel = "translate"> Ce texte devrait être traduit </ p >

Avec une simple fonction, alors nous pouvons utiliser prototype.js pour traiter toutes les balises HTML avec rel='translate' :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* @ Nom: translate ()
* @ Description: traduire
* /
fonctionner translate () {
) . each ( $ $ ('[Rel = "traduire"] "). Chaque (
e ) { fonction (e) {
( e. innerHTML , 'it' , 'en' , google. langue. traduire (e. innerHTML, 'fr', 'fr',
result ) { fonction (result) {
result. translation ) { if (traduction result.) {
result. translation ; et innerHTML = résultat de la traduction..;
{ Else {}
'Translate Error! \n \n ' + result. error . message ) ; alert ('Erreur Translate \ n \ n "résultat + message d'erreur.).;
}
}
);
}
);
}

Vous pouvez le voir en action sur les e-lementi.com

Évidemment, le script peut (et / ou doit) être perfectionné selon le cas. . Il est intéressant de noter, toutefois, qu'il est possible specializzarlo de manière à être remplacé des images (dans le cas de boutons dans les graphiques qui contiennent du texte) ou de lui faire dresser les détails TAG comme INPUT ou TEXTAREA .

Une des limites que j'ai rencontrés, je voudrais approfondir, le nombre de caractères qui peuvent être traduits. Dans le cas de textes importants, en fait, il est difficile d'obtenir une erreur: en fait, que je lance le script avec un alert() .

En savoir plus ...

Dynamic HTML avec Prototype: les styles et les scripts

Il ya un an j'ai écrit un post ( Dynamic HTML avec JavaScript ) qui illustre quelques techniques pour ajouter dynamiquement des feuilles de style et des scripts dans une page HTML chargée. Qui utilise prototype.js peut grandement simplifier la vie en utilisant, par exemple:

1
2
3
4
5
6
"dom:loaded" , le document d'observer ("dom: chargé".,
fonction () {
new Element ( "script" , { type : "text/javascript" , src : "/js/altro.js" } ) ; var script = new Element ("script", {type: "text / javascript" src: "/ js / altro.js"});
) [ 0 ] . insert ( script ) ; $ $ ('Chef') [0] Insérer (script).;
}
);

Après la page est chargée ( document.observe ) ajoute un script JavaScript nouvelle! Pour les styles, c'est exactement la même chose!

En savoir plus ...



Arrêtez SOPA