Catégorie «jQuery»


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 (
la 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 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 (s) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (Ce). Css («curseur», «pointeur»). Cliquez sur (
la 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 ...

Shadowbox 2.0: La Release Candidate 1

shadowbox Elle a été libérée de la Release Candidate 1 (RC1) pour la version 2.0 de Javascript bibliothèque Shadowbox , par Michael Jackson JI , utile pour ouvrir des fenêtres dédiées à des points de vue des différents types de médias, à partir de Flash pour Quicktime pour des pages HTML. Dans cette nouvelle version incluent:

  • Le site est plein d'informations et comprend maintenant un assistant (dans le style de mootools) afin de créer «à la volée" un package de bibliothèque adaptés à nos besoins
  • Possibilité d'utiliser un module de standalone base, sans nécessairement inclure - adaptateur spécifique - bibliothèques externes comme prototype.js, JQuery, etc ...
  • Les améliorations apportées à la gestion et la mise en œuvre de Skins
  • Emplacement

La bibliothèque est également disponible sur le SVN à l'adresse:

  http://michaeljackson.googlecode.com/svn/trunk/shadowbox 

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, la charge, est garanti par le même réseau que Google qui, en plus de fournir une structure en soi de serveur distribué, permet (par défaut) de chargement compressé (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 ...

Bibliothèque de lumière: Slimbox par une Shadowbox, les galeries en Javascript

Certains pourraient dire - et à juste titre - assez! Librairies Javascript (discrète - non intrusive, ou partiellement) pour gérer les images et les galeries sont si nombreux. Quoi qu'il en soit, voici la liste, avec les avantages et les inconvénients, le meilleur que j'ai essayé.

Slimbox 01:41

Extrêmement minime, 7K (version 1.41), exige mootools à travailler. Comme indiqué sur la page d'accueil est un clone réel graphe Visionneuse , nous allons voir ci-dessous. Honnêtement, mis à part la compacité extrême de la bibliothèque n'est pas propres caractéristiques. Sur le même site, cependant, vous pouvez également trouver un script pour générer run-time réflexions ... vous voudrez peut-être de limiter cette ;)

Note: -6 - Page d'accueil Slimbox, Reflection.js Page d'accueil pour MooTools

Lightbox2

Lightbox2 L'un des plus connu et simple. Gère les images contenues dans ce communiqué sont (de sorte qu'il ne fonctionne pas avec QuickTime, Flash, etc.) Pour son fonctionnement, exige Prototype et Scriptaculous . Utilisez l'attribut rel pour identifier les liens de vos images à traiter:

1
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < une href = "images/image-1.jpg" rel = "lightbox" title = "ma légende"> sur l'image # 1 </ une >

Comme les autres bibliothèques que nous allons voir, il prend en charge le mode diaporama, en insérant entre parenthèses tout identifiant dans une série de lien / image:

1
2
3
"images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < une href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> sur l'image # 1 </ une >
"images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < une href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> sur l'image # 2 </ une >
"images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < une href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> sur l'image # 3 </ une >

Note: 6 - Page d'accueil Lightbox2

LIGHTWINDOW 2,0

LightWindow 2,0 Même cela est assez fréquent! Après tout, comment comprendre ce qui est le plus utilisé? ;) . Toutefois, il est extrêmement complet et polyvalent. Sur le site de la demande est pour les dons pour l'achat d'un Mac ... un peu invasive et urgent ... Quoi qu'il en soit, comme la précédente, pour son fonctionnement, nécessite la présence de Prototype et Scriptaculous . Contrairement à son prédécesseur, cependant, cela vous permet de visualiser les types de fichiers moltisiimi: à partir des images, des films QuickTime, films Flash, pages HTML externes et PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). En revanche, utilise des attributs différents, dont certains en option ( author, caption et title ) que les autres exigences ( class et params - pour définir le comportement de la bibliothèque). Par exemple, pour afficher une galerie d'exposition ou une diapositive en utilisant l'attribut rel :

1
2
3
"gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < une href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "super savoureuse Look!" author = "Inconnu"> sur l'image # 1 </ à >
"gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < une href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Méfiez-vous des warewolves ..." caption = "Je ne devrais pas faire ça quand je suis affamé" author = "Inconnu" image> # 2 </ une >
"gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < une href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "C'était bien!" caption = "Prenez ce que des sushis!" author = "Inconnu"> image # 3 </ une >

Score: 8 - Page d'accueil LightWindow 2,0

ShadowBox 1.0B

Shadowbox Bien que la version beta 1.0, c'est peut-être la bibliothèque la plus complète, tant du point de vue fonctionnel pour les deux bibliothèques en charge. Pour son fonctionnement, en fait, vous pouvez choisir parmi une variété de cadres, avec le fichier "adaptateurs" spécialement fabriqués et fournis par l'auteur:

L'effet visuel (configurable via la peau / css), puis, contrairement aux autres, est certainement plus attrayant. Les attributs sont utilisés seulement rel où, à son intérieur, trouver de l'espace tous les autres paramètres de configuration. Par exemple, pour réaliser une galerie, il suffit d'utiliser:

1
2
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < une href = "beach.jpg" rel = "shadowbox [de vacances]"> La Plage </ une >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < une href = "pier.jpg" rel = "shadowbox [de vacances]"> The Pier </ une >

Si vous souhaitez définir des options ( voir le site web pour la liste complète ) il suffit d'utiliser la syntaxe suivante:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < une href = "monimage.jpg" rel = "shadowbox; les options = {overlayOpacity: 0,5, redimensionnement: false}"> Mon image </ une >

Sur l'Internet, ils peuvent trouver d'autres, comme Highslide JS . En effet, si une autre bibliothèque que vous voulez me rendre compte ... Quoi qu'il en soit, personnellement, je préfère Shadowbox pour plus de simplicité, d'évolutivité et de cross-cadre.

Note: 9 - Haut Shadowbox 1.0B

En savoir plus ...



Arrêtez SOPA