8 tutoriels jQuery fantastiques pour les concepteurs
29 mars 2008 par chriscoyier · Les 7 Commentaires
Faites glisser et de l'effet tiroir
L'effet est communément connu comme un "accordéon" et il est généralement utilisé pour glisser vers le haut, ou vers le bas des blocs de contenu afin d'exposer de nouveaux blocs. Le site Web d'Apple est une grande démonstration de cet effet dans l'action, où la souris se pose sur le titre de la «section» et les liens associés sont exposés. Ce qui rend cet effet particulièrement cool, c'est que les tiroirs de maintenir une hauteur fixe et coulissant entre la zone restreinte.
Des effets de transition de la chaîne-capables
Maintenant, voyons la puissance de chainability jQuery. Avec seulement quelques lignes de code, je peux faire la boîte de voler avec mise à l'échelle et de transition fading.
VISITE TUTORIAL (# 6)
Voir la démo
Onglets jQuery
Tabulation a été un lieu commun sur l'Internet pendant un certain temps maintenant. Sites Web d'aujourd'hui fera usage de tabulation sans avoir à recharger la page avec l'ajout de JavaScript. Pour ce tutoriel, j'ai créé deux screencasts montrant comment appliquer rapidement un tableau de bord de jQuery pour différentes configurations de balisage, qui, si le balisage est bien conçu, il sera automatiquement dégradent bien sans Javascript.
Création d'un graphique modifiable
La visualisation des données en HTML depuis longtemps été difficile à réaliser. Solutions passées ont impliqué non standard plugins, les comportements exclusifs et des images statiques. Mais cela a changé avec la croissance récente de l'appui de l'élément HTML Canvas nouvelle, qui fournit une API de dessin natif qui peut être abordé avec JavaScript simple.
Facile de transfert multi Select avec jQuery
Je suis sûr que à un moment ou un autre, vous avez rencontré un widget de formulaire comme celui-ci, ce qui permet des options pour être échangés d'un select multiple à l'autre.
VISITE TUTORIAL
Vivre à l'intérieur de démo tutoriel
jQuery Hover Sous Tag Cloud
Nuage de mots Lorsque, utilisés correctement, ils peuvent offrir aux visiteurs une illustration instantanée des principaux sujets de contenu du site. Et même si nous n'avons pas beaucoup de choix que dans leur conception, nous pouvons encore trouver notre chemin à venir avec de nouvelles approches de conception et des solutions. Voici une nouvelle approche: Utilisation de jQuery pour réduire la taille du nuage tag que vous avez sur vos sites.
Galerie Curseur
Cette «curseur produit est semblable à une galerie en ligne droite, sauf qu'il ya un curseur pour naviguer dans les articles, c'est à dire le bit de l'utilisateur contrôle pour afficher les articles. Des choses simples. jQuery dispose déjà des plugins pour créer ces effets de sorte que nous n'avons pas d'aller à leur sujet la création de nous-mêmes à partir de zéro.
Nouvelles Ticker
LiScroll est un plugin jQuery qui transforme une liste donnée non ordonnée dans un défilement Nouvelles Ticker.
VISITE TUTORIAL
Vivre à l'intérieur de démo tutoriel
Oh combien parfait!
J'ai juste commencé à apprendre jQuery et ils ont maintenant quelque chose à pratiquer.
Merci!
C'est juste génial de complication pour jQuery. Merci pour cette. Il ne pouvait pas avoir obtenu mieux. Cheers.
Great Job! De très bons tutoriels .... je les aime tous!
Bonne journée
à la fois démo sous nuage de tags et de démonstration d'accordéon se casser si vous augmentez votre taille de la police dans le navigateur. Signe de mauvaise html / css.
Peut-être que vous devriez vous inquiéter html et css avant de se soucier javascript fantaisie.
L'effet onglet peut être fait très facilement avec quelques lignes de js, sans jQuery.
Belle poster ... maintenir le bon travail
Oh combien parfait!
J'ai juste commencé à apprendre jQuery et ils ont maintenant quelque chose à pratiquer.
Merci!
Modifiable graphique est grande, mais je ne peux pas utiliser avec JQuery 1.2.2 ou 1.2.3, il ne fonctionne qu'avec la version 1.2.1.
Daniel