Plugins Archive pour '

12 août 2009

Stefan Huissel

0

Formulaire de jQuery Plugin - faire de la magie AJAX facilement

L'autre jour, j'ai rencontré sur un plugin qui permet aux développeurs façon la plus simple la possibilité de mettre en œuvre leurs formulaires en fonction AJAX.

form_plugin

Il a été co-développé par John Resig , un des fondateurs de jQuery.

Il offre une variété de fonctions, et sa mise en œuvre simple. Il suffit d'écrire un formulaire HTML standard, puis appelez le plugin avec les options que vous souhaitez.
Cela pourrait être comme suit:

? Code Voir le JAVASCRIPT 
  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20

 script type = "text/javascript" src = "path/to/jquery.js" ></ script > < script type = "text/javascript" src = "path/to/form.js" ></ script > < script type = "text/javascript" > $ ( document ) . ready ( function ( ) { // bind 'myForm' and provide a simple callback function $ ( '#myForm' ) . ajaxForm ( function ( ) { alert ( "Formular wurde gesendet!" ) ; } ) ; } ) ; </ script > </ head > < body > < form id = "myForm" action = "comment.php" method = "post" > Name : < input type = "text" name = "name" /> Kommentar : < textarea name = "kommentar" ></ textarea > < input type = "submit" value = "Abschicken" /> </ form > </ body > type = "text / <script src = javascript" <Head> "path / vers / jquery.js"> </> <script type script = "text / src = javascript" "path / vers / form.js"> < /> <script type script = "text / javascript"> $ (document) prêt (function () (/ / bind "myForm.» et de fournir une fonction de rappel simple $ ('# myForm »). formulaire ajax (function () ( alert ("formulaire a été envoyé <!");));)) / script> </ body> <form tête id = action "myForm" méthode "comment.php" = "post"> Nom: < input type = "text" name = "nom" /> Commentaire: nom = <textarea "comment"> </> <input type textarea valeur "submit" = /> "submit" </ form> </ body>

Cet exemple envoie le formulaire nom de deux champs et de commenter en tant que requête Ajax à la forme-tag dans le script spécifié.
Ceci est juste un exemple simple. En outre il existe des méthodes pour réinitialiser Formularberarbeitung que, présenter manuel, la préparation d'une chaîne de requête, etc

Le plugin a également quelques options. Un extrait de la:

  • cible
  • url
  • succès
  • ...

vétéran Ajaxian, ces paramètres doivent être connus. Ils sont ensuite utilisés comme suit:

? Code Voir le JAVASCRIPT 
  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11

 options = { target : '#divToUpdate' , url : 'comment.php' , success : function ( ) { alert ( 'Erfolgreich abgeschickt!' ) ; } } ; // Options einfach der Mehthode ajaxForm als Parameter übergeben $ ( '#myForm' ) . ajaxForm ( options ) ; / / Option objet de définir les attributs options var (target = "# divToUpdate", url: "comment.php, le succès: function () (alert ('envoyé avec succès');)) / / Options simplement formulaire ajax Mehthode en tant que paramètres $ ('# myForm »). formulaire ajax (options);

Simples peuvent être difficiles à mettre en œuvre une forme Ajax. tellement amusant de jouer. Vous pouvez trouver l'ensemble du document, en anglais et en petits exemples Malsup .

30 Juin 2009

Storm Oliver

5

MyPass jQuery - iPhone cache passe 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 a été avec moi 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 ( { charReplace : '%u2665' , charDuration : 1000 } ) ; $ ('. MonChampTexte »). MyPass ((charReplace:«% u2665, 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 . Prenez juste 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.

? Code Voir le 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