Articles taggés avec 'Javascript'


jQuery: ronds bords sur les images se chevauchent

En raison de la prestation différente selon les navigateurs, Microsoft Internet Explorer certainement voir dans cet esprit, nous devons toujours avoir recours à des astuces pour appliquer des effets spéciaux qui devraient maintenant être une norme. Le prix-discuté des bords arrondis sont un exemple classique de «catastrophe» produite par l'incapacité totale de faire quelques normes sérieuses sur les pages rendent HTML / CSS. , etc… Il existe de nombreuses solutions qui permettent au réseau pour obtenir des "effets" (effets qui présentent comme étant exemptées à partir des coins arrondis HTML, des effets d'ombre, des reflets, etc ...) avec des taches sur les feuilles de styles, des astuces spéciales en utilisant div greffé, les bibliothèques Javascript, utilisation de canvas , etc ...
Sur un purement pédagogique, je vais illustrer autre technique (cross-browser) à appliquer aux bords arrondis des images:

Démo et la source

En savoir plus ...

WordPress: étape par étape comment créer leur propre login

Dans ce tutoriel nous allons voir comment créer une procédure de connexion personnelle, en utilisant également des fonctionnalités Ajax via jQuery . ). Il ya plusieurs façons de personnaliser votre login WordPress, par exemple par l'utilisation d'hameçons et les filtres ( add_action() , les add_filter() ). Ici, nous allons utiliser une procédure de niveau inférieur, bien qu'il y ait encore interfacceremo noyau WordPress. En outre, nous tenterons de valider un utilisateur à travers l'e-mail dupla / mot de passe.

Pourquoi créer leur propre login?

  • Dans certains contextes, peut retourner uitle avoir un contrôle maximal sur la page de connexion, de proposer une mise en page personnalisée à nos utilisateurs enregistrés. En outre, vous pouvez enrichir la page avec des informations utiles, un logo de la classique "Mot de passe oublié?"
  • Pour permettre l'accès via l'e-mail (comme dans l'exemple discuté ici) au lieu de user_login norme WordPress
  • Pour être en mesure d'entrer dans un panneau de connexion dans la barre latérale de notre blog
  • Et enfin, d'avoir un squelette - et une idée - un plugin grande : D

Environnement

Dans notre exemple tutoriel / nous allons travailler sur la racine de WordPress dans un dossier mylogin . . Nous avons créé deux fichiers php dans ce dossier: index.php et logon.php . Le premier contiendra notre interface de connexion avec toutes les fonctions Javascript / jQuery nous avons besoin. Le second fichier, logon.php , contiendra le code pour validation de l'utilisateur. e una cartella images . Nous créons ensuite un dossier css et dans ce fichier layout.css et le dossier images . Dans le dossier images insérer un classique Ajax loader: créer en ligne AjaxLoad.info . A la fin vous devez avoir:

  • mylogin
  • index.php
  • logon.php
  • CSS
  • Layout.css
  • images
  • ajax-loader.gif

En savoir plus ...

Très court astuce: des valeurs non définies en Javascript

Y at-il un raccourci pour assigner "à la volée" une valeur à une variable si l'on n'est pas définie (undefined), en utilisant l'opérateur logique OR (| |) - tube double:

1
2
3
4
5
/ / Foo n'est pas défini
bar var;
pluto || '5' ; var foo = bar | | '5 ';
pippo ) ; alert (toto);
/ / Résultat: 5

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 ...

Variété de codage et le codage

Certains affirment que la programmation est un art et, finalement, je ne peux qu'être d'accord, en particulier lorsque vous dénicher des solutions très différentes pour le même problème. Pour comprendre comment cela est vrai comment un besoin identique dans la langue medisimo (JavaScript) peuvent être résolus avec des approches très différentes et originales.

Gauche de la tablette à zéro

. Un certain nombre, mais le discours est également valable pour n'importe quelle chaîne, tels que 123 peut être rempli sur la gauche - pour aérer - avec un certain nombre de zéros, par exemple: 00123 . Ce besoin a à plusieurs reprises et il est utile de mettre dans une colonne - ou du moins spectacle - un certain nombre d'une manière propre, implicitement en indiquant sa valeur maximale. . Dans les jeux vidéo, par exemple, le score classique (la partition) est souvent appelé à 001234 , ce qui indique que tout au plus nous arriverons à 999999 . Voici comment le même problème a été résolu par différents promoteurs:

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
/ **
* Chaîne Pad Gauche
*
* @ De http://snipplr.com/view/8423/left-pad-string/
* @ Auteur Web-http :/ / www.mechanicmatt.com/
*
* Num @ Param - Striga à remplir
* Les totalChars @ param - Nombre total de caractères, y compris les "zéros"
* @ Param padWidth - Caractère utilisé pour combler, par défaut "0"
* /
num , totalChars , padWith ) { leadingZeros fonction (num, totalChars, padWith) {
"" ; num = num + "";
padWith ) ? padWith : "0" ; ? padWith = (padWith) padWith: "0";
num. length < totalChars ) { if (longueur Nb <totalChars) {
num. length < totalChars ) { while (longueur Nb <totalChars) {
num ; num = num + padWith;
}
{ } Else {}}

num. length > totalChars ) { //if padWith was a multiple character string and num was overpadded if (longueur> n ° totalChars) {/ / si padWith était une chaîne de caractères multiples et nombre a été overpadded
( ( num. length - totalChars ) , totalChars ) ; num = num chaîne (longueur n (- totalChars), totalChars).;
{ } Else {}}

retourner num;
}
leadingZeros ( "asdf" , 10 , "0" ) ) ; alerte (leadingZeros ("asdf", 10, "0"));

scegliendo anche il tipo di carattere da usare tramite padWidth , invece del default 0 . Cette solution est extrêmement articuler, mais vous permet d'ajouter n'importe quel nombre de 0 au nombre num choisir le type de police utilisée par padWidth , au lieu de la valeur par défaut 0 .
Décidément original, au contraire, cette solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ **
* String_pad
*
* @ De http://snipplr.com/view/700/stringpad/
* @ Auteur http://d.hatena.ne.jp/brazil/20060721/1153489937
*
* Str @ Param - Striga à remplir
* Len @ Param - Nombre de caractères, y compris les "zéros"
* Ch @ Param - caractère utilisé pour combler
* /
str , len , ch ) { return new Array ( len - ( '' + str ) . length + 1 ) . join ( ch ) + str } touche de fonction (str, len, ch) {return new Array (len -. (str +'') de longueur + 1). join (ch) + str}

pad ( 56 , 4 , '0' ) ) ; // 0056 alert (pad (56, 4, '0 ')); / / 0056

Même résultat, avec une approche complètement différente. . Encore une fois, nous avons la possibilité de décider du nombre de caractères de remplissage à l'aide du paramètre len , et la police à utiliser avec ch . Missing est l'utilisation de défaut fourni dans la fonction ci-dessus.
Celui que j'utilise, mais ...:

1
2
3
4
5
6
7
8
9
10
11
12
/ **
* String_pad
*
* @ Auteur Giovambattista Fazioli
* @ Web http://www.undolog.com
*
* @ Param s - Striga à remplir
* @ Param s - la chaîne de caractères qui indique soit que la longueur
* Par exemple: "0000" = longueur "0" caractère 4
* /
s , l ) { return ( l. substr ( 0 , ( l. length - s. length ) ) + s ) ; } padding fonction (s, l) {return (L. substr (0, (longueur L. - longueur s)) + s.);}
padding ( '123' , '0000' ) ) ; alert (rembourrage ('123 ', '0000'));

Si vous avez d'autres solutions intéressantes, n'hésitez pas à commenter : D

En savoir plus ...

Un compte à rebours de classe en Javascript

Dans le poste avec la 3D à rebours FIVe3D (voir aussi comment j'ai fait: écrire un compte à rebours en Flash ), a été donnée une classe pour créer un objet en Actionscript CountDown, voici une version similaire en Javascript:

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
27
28
29
30
31
32
33
34
35
36
/ **
* Classe à rebours
*
* @ Auteur Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* @ Param jj (string) «jour mois, année '
*
* /
dd ) { fonction compte à rebours (jj) {
/ / Init objectif de temps
new Date ( dd ) ; var target = new Date (jj);
= target. getTime ( ) ; .. ce targetTime = cible getTime ();

/ **
* Actualiser le compte à rebours
* /
= function ( ) { cette fonction. refresh = () {
new Date ( ) ; var today = new Date ();
today. getTime ( ) ; var today = currentTime getTime ().;
/ / Temps restant
( this . targetTime - currentTime ) ; ce _leftMilliseconds = (this. targetTime - currentTime).;
Math. floor ( this ._leftMilliseconds / 1000 ) ; cet étage _leftSeconds = Math (_leftMilliseconds this. / 1000)..;
Math. floor ( this ._leftSeconds / 60 ) ; cet étage _leftMinutes Math = (_leftSeconds this. / 60)..;
Math. floor ( this ._leftMinutes / 60 ) ; .. ce _leftHours = Math étage (this. _leftMinutes / 60);
/ / Pas de module
= Math. floor ( this ._leftHours / 24 ) ; .. ce leftDays = Math étage (_leftHours this. / 24);
/ / Pour l'impression
= this ._leftMilliseconds % 1000 ; ce leftMilliseconds = Ceci _leftMilliseconds%. 1000.;
= this ._leftSeconds % 60 ; ce leftSeconds = Ceci _leftSeconds 60%..;
= this ._leftMinutes % 60 ; ce leftMinutes = ce _leftMinutes 60%..;
= this ._leftHours % 24 ; .. ce leftHours = ce _leftHours 24%;
}
( ) ; ce refresh ().;
}

Exemple

1
2
3
new countDown ( '1 1, 2009' ) ; var cd = new compte à rebours (1 '1, 2009 ');
/ / Afficher le nombre de jours, heures, minutes, secondes et millisecondes à 1 Janvier, 2009

En savoir plus ...

WordPress: comment écrire une réponse à un commentaire en utilisant jQuery

Récemment Cristiano Up a publié un plugin utile pour WordPress qui peuvent aggiugere deux liens à chaque commentaire sur un post (peut-être vous avez installé un semblable, puisque dans le répertoire que je WordPress.org rayonnait un couple, cependant, être un logiciel en italien serait l'événement pour honorer l'excellent travail accompli par les chrétiens). Ces liens (réponse et devis), rencontrer et / ou faire la liste de l'auteur d'un commentaire, en effectuant la tâche fastidieuse de l'insertion le signe arobase (@) pour indiquer à qui il est adressé. Dans ce tutoriel, je vais vous expliquer - à moyen-experts utilisateurs - comment ajouter des fonctionnalités telles deux "main", sans avoir recours à l'installation de tous les plugins. En outre sciemment exploiter les capacités de jQuery JavaScript de parti. La technique que je présente est le même que j'ai utilisé pour introduire cette fonctionnalité dans ce blog.

Note: L'utilisation d'un plug-in est la meilleure solution pour ceux qui ont tendance à changer fréquemment votre modèle WordPress, ou tout au moins, a des plans pour mettre en œuvre. Ce tutoriel est seulement de montrer comment effectuer des interventions ciblées dans le code de WordPress et est dédiée à la plus curieuse.

Modifier votre comments.php

Le premier changement que nous faisons est d'insérer le lien "réponse" et "actions", à chaque commentaire. Pour ce faire, éditez le fichier comments.php trouve dans le dossier de notre thème. Ce fichier contient toutes les instructions qui s'affichent les commentaires à la fin d'un poste. La section, nous sommes préoccupés (qui peut varier légèrement d'un thème à) est la boucle pour créer des commentaires différents, identifiés par:

En savoir plus ...

jQuery: comment construire une extension de Plugin

Comme toutes les bibliothèques de ce type également jQuery vous permet d'étendre sa fonctionnalité de base en utilisant le plugin réel. Respecter les règles de son fonctionnement, c.-à-restituiendo toujours un pointeur vers l'élément sélectionné ou le même jQuery, vous pouvez écrire un plugin avec quelques lignes de code. Prenez par exemple le projet de code de jQuery contre tout le monde: un point de repère avec 5 navigateur , qui était (après la correction rapporté par Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). 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 ();....
}
);

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 harmonieux 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 ...



Arrêtez SOPA