Archive pour Juin 2009

MyPass jQuery - mot de passe iPhone cache-Style

nicePass - jQuery Plugin

Sur

autre soir, j'ai été assis sur le canapé et je voulais sur mon iPhone lorsque Facebook login, mon mot de passe quand je suis tombé sur ce petit détail, qui est l'entrée du mot de passe encore plus agréable.

L'un ou l'autre propriétaires d'iPhone sais ce que je veux dire. dans le domaine de plus pour une courte période de la dernière entrée de mot de passe pour voir le point de ce qui lui donne l'utilisateur une plus grande sécurité du mais que son entrée est incorrecte.

J'ai pensé que quelque chose comme ça pourrait aussi être tout à fait normal formes et nous avons donc écrit un petit plugin jQuery qui imite ce comportement.

Comment faire pour utiliser

MyPass jQuery utilise jQuery bibliothèque Javascript .

Vous avez seulement à intégrer les deux fichiers dans votre tête.

? Code Voir le JAVASCRIPT
  1
 2
  "_js/jquery.js" type = "text/javascript" ></ script > = Src "_js / = type jquery.js" "text / javascript"> / script> <<Script
 "_js/jquery.myPass-1.0.js" type = "text/javascript" ></ script > src = "_js/jquery.myPass-1.0.js" type = "text / javascript"> / script> <<Script 

Options

Pour activer le plugin et vous devez vous arrêter maintenant il suffit d'écrire le texte suivant dans votre tête

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
 5
  ) . myPass ( { $ ('. MonChampTexte »). MyPass ((
			 , : '% U2665 charReplace,
			 charDuration: 1000

	 )); 
  • charReplace: Ici vous pouvez régler par le signe dont les lettres sont remplacées sollen.Als point par défaut est la norme établie. Les autres caractères peuvent être trouvés ici . Il suffit de prendre les 4 derniers chiffres de l'Unicode et est u% auparavant. % Par exemple charReplace 'u2665' utiliser à la place d'un ♥ •.
  • charDuration: Ici vous pouvez régler votre temps comme le dernier personnage à apparaître.

HTML

Dans la partie HTML de votre site vous est maintenant simplement une zone de texte normal, lui donner un nom et la classe que vous aurez entré ci.

monChampTexte dans ce cas..

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
  "test.php" method = "post" > "test.php" = méthode d'action <form = "post">
 = "myTextField" name = "password" type = "text" /> classe <Input = nom "myTextField" type "password" = /> "text"
 = "Send" type = "submit" value = "submit" /> = Nom du type "submit" = valeur "Send" <Input = /> "submit"
 / Form> < 

Après l'envoi du formulaire, vos données peuvent facilement traiter par exemple via PHP.

  1
 [ 'password' ] ; echo _POST ['password $']; 

Téléchargement & Démo

Démonstration - Plugin en action

Télécharger - Tous les fichiers à télécharger

jQueryList - Plugin et la collecte d'échantillons

jquerylist

Tout le monde le sait. Au cours du temps on a créé un certain nombre de signets, si vous êtes chanceux, même triés dans des dossiers et sur le sujet. Si l'on maintenant, mais après un certain plugin ou regarde par exemple vous partez. Où était-ce? Qu'est-ce que c'était?

J'accepte l'ensemble, il est maintenant encore plus à l'aise en premier.
Hier je suis passé par un tweet sur la liste jQuery rencontrés.
Avec la liste jQuery est une page avec des exemples et des plugins jQuery autour.
Les entrées sont divisées en 32 catégories, comme les grilles, et faire glisser la validation de formulaire, etc

Tous les contenus sont combinées sur une seule page. Pour chaque entrée, il ya un petit screenshot de la page en cours pour voir connexes.
Avec 255 entrées, certaines d'entre elles est si. Pour moi, la page n'est pas sûr de remplacer mes favoris, mais si vous regardez la chose rapide des besoins dans les signets ou pas la bonne chose est sûre, je regarde par ici.

PeriodicalUpdater pour jQuery

Je suis maintenant sur le blog de 360innovative une jQuery petit script Nice rencontrés.
Les garçons ont l'PeriodicalUpdater () dans le prototype par lequel la maison, il est considéré comme un modèle et fait de cette fonction disponible pour jQuery.
La fonction charge le contenu dans un des intervalles déterminés.

Le plugin est, comme d'habitude, facile à mettre en œuvre et a divers paramètres tels que sendData, minTimeout, maxTimeout, type multiplicateur, etc

Le plugin à télécharger et une démo est disponible sur le site officiel.

ifixpng2 & PNGFix - Transparence pour IE6

Maintes et maintes fois que nous rencontrons dans le développement de pages Web sur le problème de fond transparent png dans IE6. Il ya des bidouilles diverses et autres solutions de contournement pour cela. Un peu spéciale ici pour être présentés ci-dessous.

- Ifixpng2
Le plugin ifixpng vieux a une mise à jour vous manqué. Certaines des erreurs ou des problèmes ont été résolus, particulièrement remarquable dans le processus des éléments à l'image de fond n'est pas visible et doit être visible à l'effet souhaité obtenu. Télécharger ifixpng2 que vous trouverez ici .

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
 5
 document ) . ready ( function ( ) { //Der Fix wird auf alle Class-Attribute mit "legende" angewendet $ ( '.transparent' ) . ifixpng ( ) ; } ) ; / / Prêt-événement DOM $ (document). Prêt (function () (/ / La solution est d'inclure tous les attributs de classe avec des «clés utilisés" $ ('. Transparent'). Ifixpng ();)); 

- PNGFix
plugin Nice sur le problème de transparence de résoudre un autre se trouve sur le côté de Andreas Eberhard . L'agréable, c'est que ce plugin pngs ne sont pas fixes, comme arrière-plan sont précisés dans CSS, mais le droit balises img peut également être adressée.
L'appel pour cela est la même que dans ifixpng2:

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
  / / Plugin est appliquée à toutes les images
  . ready ( function ( ) { $ (Document). Prêt (function () ( 
         . pngFix ( ) ; $ (Document). PNGFix (); 
     )); 

Cette simple appel va si bien des images sur la page, au détriment de la performance. Je recommande un appel plus précis pour justement ces images que le
devraient recevoir PNGFix.

? Code Voir le JAVASCRIPT
  1
 2
  / / Fix se réfère à chaque division de la classe "légende"
 ) . pngFix ( ) ; jQuery ('div.legende »). PNGFix (); 

Pelouse sans herbe - Google Code aire de jeu

Encore et encore, il s'agit dans le développement de Webapps sur le fait qu'un morceau de code comme tous indépendamment du projet seulement après qu'il a été conçu pour être installé. il ya petit environnement de test pour mettre en place un local plutôt que d'avoir, vous pouvez sur le terrain de jeu Google Code défouler.

code_playground

La commune la plupart des cadres JS (jQuery, jQuery UI, Mootools, Prototype, Dojo) sont représentés, comme le sont presque toutes les API de Google. Les exemples sont:

  • Langue API
  • Earth API
  • Maps API
  • Calendrier API
  • API YouTube

Pour toutes les API, il ya des petits exemples qui peuvent être exécutées immédiatement. A quelques goodies Nice qui lui sont le lien direct à la documentation de l'API ainsi que de la gestion intégrée Firebug Lite à déboguer. Le code généré peut ensuite être modifié ou copié au format HTML.

les zones de texte Better - jolie jQuery Plugin Commentaires

Un peu plus bel outil pour une meilleure facilité d'utilisation pour les champs texte offre jolie Commentaires plugin. Il permet la saisie au clavier facilement se développer avec la zone de texte et fonctionne dans tous les principaux navigateurs.

L'intégration est très simple:

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 script src = "js/jquery.js" type = "text/javascript" ></ script > < script src = "js/prettyComments.js" type = "text/javascript" ></ script > //Initialisiere Plugin nach dem der DOM-Baum vollständig geladen ist < script type = "text/javascript" charset = "utf-8" > $ ( document ) . ready ( function ( ) { $ ( '#textarea' ) . prettyComments ( ) ; } ) ; </ script > / / Intégrer les bibliothèques <script src = "js type jquery.js" / = "text / <javascript"> /> <script src = script "js type prettyComments.js" / = "text / <javascript"> / script > / / Initialisation de la plugin après l'arbre DOM est complètement chargé type <script = "text charset javascript" / = "utf-8"> $ (document). prêt (function () ($ ('# textarea'). Commentaires jolie ();)) </ script> 

Le plugin a les attributs suivants:

  • animer: vrai / faux
  • la vitesse d'animation: «lent» / «normal» / «rapide»
  • maxHeight: 500 (à compter de ce montant semble barre de défilement)

Un exemple de ceci:

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
 5
 "text/javascript" > $ ( document ) . ready ( function ( ) { $ ( '#textarea1' ) . prettyComments ( { animate : true , maxHeight : 100 } ) ; } ) ; </ script > type = <Script "text / javascript"> $ (document) Prêt (function () ($ ('# textarea1 »). Pretty Commentaires. ((animer: true, maxHeight: 100 ));)) </ script> 

Outils pour jQuery - Une interface utilisateur éléments plugin

JQuery possède sa propre bibliothèque de l'assurance-chômage ou des éléments d'interface utilisateur. Il s'agit, cependant, plus d'animation et autres effets. Cours sont également des composants finis tels que des calendriers, accordéon et «glisser-déposer disponibles.

outils de jQuery , cependant, repose directement sur les éléments finis. Semblable au site jQuery UI peuvent immédiatement télécharger des pièces individuelles ou toutes les fonctions dans un script. Le Funktionspallette s'étend sur les info-bulles, des onglets, défilement, mettant en évidence et de superpositions.

jQuery Tools

jQuery outils peuvent être intégrés facilement, voici un onglet par exemple:
Le code HTML

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
  <! - Les onglets -> 
 class="tabs"> <ul 
     <li> <a href="#"> Tab 1 </ a> </ li> 
     <li> <a href="#"> Tab 2 </ a> </ li> 
     <li> <a href="#"> Tab 3 </ a> </ li> 
 </ Ul> 

 <! - Onglet "Contenu" -> 
 class="content"> <div 
     contenu <div> premier onglet.  contenu de l'onglet sont appelés le «contenu» </ div> 
     Deuxième <div>> <contenu de l'onglet / div 
     Le troisième onglet <div>> contenu </ div 
 </ Div> 

Le code Javascript

? Code Voir le JAVASCRIPT
  1
 2
 3
 4
 5
 function ( ) { // Zuordnung von den ul-Tags zum Inhalt $ ( "ul.tabs" ) . tabs ( "div.content> div" ) ; } ) ; / / Appel à l'événement DOM-Ready $ (function () (/ / affectation de l'ul-tag au contenu $ ("ul.tabs"). Onglets (">");)); div div.content 

Ce plugin offre une séparation claire entre les CSS et le code JavaScript, et par sa petite taille et la facilité d'utilisation.

Il suffit de regarder et d'essayer vous ..

jqPlot - plugin jQuery pointage

jqplot1

Qui n'a jamais traite avec elle sous la forme de cartes pour visualiser des données, ont l'ID d'utilisateur il ya beaucoup de possibilités.
MooTools, jQuery, PHP, etc Maintenant, avec un autre plugin jQuery jqPlot qui était donc la facilité de mise en œuvre et la variété des paramètres en ce qui concerne l'avant-garde doit être.

Les dispositifs principaux incluent:

  • Un certain nombre de styles de ligne
  • Horizonalte et les graphiques à barres verticales
  • Abat-jour pour les lignes, des marqueurs et les bars, etc
  • Glissez-déposez des points avec mise à jour automatique des valeurs
  • Les lignes de tendance
  • etc

Tout cela fonctionne sur tous les navigateurs les plus courants et avec la version actuelle jQuery.

Démonstrations , les fichiers à télécharger, un très très documentation détaillée peut être consultée sur le site officiel.

Listes déroulantes de filtre plugin - baisse de génome

Tout le monde le sait. Il a une liste déroulante avec un nombre incroyable d'inscriptions et l'utilisateur est obligé de faire défiler jamais rencontrer son longue portée.
Dans le pire des cas, la liste n'est donc pas encore classés par ordre alphabétique.

Exactement ce numéro aborde le plugin de filtrage listes déroulantes.
Il offre à l'utilisateur la possibilité de filtrer beiKlick à une icône de petite recherche, le contenu de la chute avant.

dropfilter

Initialement développé en JavaScript pur, il est maintenant le filtre comme un plugin pour Drupal, jQuery, WordPress, Mantis, ou simplement autonome.

L'intégration des plugins jQuery est très simple. Fichiers, avec et activer Embed:

? Code Voir le JAVASCRIPT
  1
  ) . droplistFilter ( ) ; $ ("Select"). DroplistFilter (); 

Une démo et tous les fichiers à télécharger se trouve sur le site officiel .