Codepal

Posts Tagged 'formes'

Création d'un effet néon clignotant pour vos formulaires en utilisant CSS3 et jQuery

Saturday, 17th Juillet, 2010

Eh bien grâce à la brillante jeune nouveau sur le bloc, CSS3, retapé avec un peu de jQuery, je vais vous montrer comment construire un effet astucieux pour améliorer votre forme.

Suis sûr que ce clin effets cool néon dans les formulaires vont être utiles pour beaucoup de buts alors ne manquez pas mon tutoriel sur le 1stWebDesigner.com .

Dans ce tutoriel, nous avons fait usage de @-webkit-images-clés qui ne fonctionne que dans les navigateurs utilisant le moteur de rendu Webkit comme Chrome et Safari. Pour les navigateurs comme Firefox et Opera, où il n'ya pas d'alternative, nous devrons gracieusement dégradent l'effet, qui dans ce cas sera juste un box-shadow sur le focus. Internet Explorer (jusqu'à la version 8) ne peut rendre la plupart de ce que nous allons apprendre ici, mais IE 9 ne semble pas être très prometteur de ce que j'ai vu dans l'aperçu plateforme récente.

Tags: CSS 3 , du développement , des formes , comment , jQuery
Publié dans Tutoriels | 4 Commentaires »

Le «Sélectionner» Problème Après l'aide jqTransform et sa solution

Thursday, Février 18th, 2010

Le Projet

Dans ce récent projet de la mine, j'ai été obligé de construire une page d'atterrissage. Dans cette page d'atterrissage, il y aurait une liste de langues et après que l'utilisateur sélectionne une langue particulière, la page d'accueil du site serait ouverte automatiquement dans la langue respective sélectionnée. Il a également été requis pour le style de la boîte de liste de sélection dans la façon dont il a été donné dans la conception de la page de destination. J'ai donc opté pour la jqTransform jQuery plug-in, que j'ai utilisé une fois pour certaines formes de style. jqTransform est très agréable de plug-in de personnaliser les formulaires de manière très facile et le produit final est sans aucun doute magnifique. Mais dans ce cas, il est devenu un disjoncteur de vitesse mineur à mes progrès.

Le Problème

Le menu déroulant liste de contrôle du formulaire HTML contient le 'select' étiquettes qui enferment les différents 'option' tags. Voici un formulaire dont je me sers de ce tutoriel pour expliquer le problème:

 <form>
	 Sélectionnez <h4> boîte sans jqTransform </ h4>
	 <div id="box-city" class="select-menus">
		 <label> Ville </ label>
		 <br/>
		 <select name="select-country">
  		         <option> Gotham </ option>
			 <option> New York City </ option>
			 <option> Smallville </ option>
		 </ Select>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Qu'est-ce jqTransform ne sont, il balaye la totalité tag 'select' et crée une liste non ordonnée contenant des hyperliens des options dans le menu déroulant de liste. Il se cache alors l'original 'select' étiquette et son contenu.

 <form class="jqtransform jqtransformdone">
	 <h4> zone Sélectionner avec jqTransform et normal méthode de changement de sélectionner </ h4>
	 <div class="select-menus" id="box-name">
		 <label style="cursor: pointer;"> Nom </ label>
		 class="jqTransformSelectWrapper" <div style="z-index: 10; width: 150px;">
			 <div>
				 <span style="width: 119px;"> Batman </ span>
				 <a href="#"> class="jqTransformSelectOpen" </ a>
			 </ Div>
                         <ul style="width: 148px; display: none; visibility: visible; HEIGHT: 100px; overflow: hidden;">
				 <a href="#" <li> index="0" class="selected"> Batman </ a> </ li>
				 <li> <a href="#"> index="1" Robin </ a> </ li>
				 <li> <a href="#"> index="2" Superman </ a> </ li>
				 <li> <a href="#"> index="3" Spiderman </ a> </ li>
			 </ Ul>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <option> Batman </ option>
					 <option> Robin </ option>
					 <option> Superman </ option>
					 <option> Spiderman </ option>
			 </ Select>
		 </ Div>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Cela ne crée pas un problème quand on utilise le 'select' tag général pour la sélection d'une valeur particulière et en effectuant ensuite la soumission du formulaire en utilisant un bouton de soumission. Il crée un problème lorsque l'on veut effectuer certaines fonctions lorsque la valeur de la liste déroulante est modifié.

Ceci est normalement réalisé en javascript en utilisant le «changement» méthode de contrôle de sélection. Le «changement» méthode de capture l'événement valeur du changement et nous pouvons accéder à la valeur sélectionnée par l'utilisateur de la manière suivante.

 / / Capturer l'événement de changement de la boîte de non-transformé Select.
 $ ("# Box-ville, sélectionnez"). Changement (function () {
	 var value = $ (this) val ().;
     alert ("Valeur sélectionnée =" + valeur);
 });

Mais après avoir utilisé les jqTransform plugin, le 'select' tag n'est plus là pour appliquer la méthode de changement sur.

La solution

La solution à cela, c'est très simple. Nous pouvons simuler l'événement de modification de la baisse jqTransformed dans la liste déroulante en appliquant une fonction cliquez sur l'élément hyper-lien dans la liste non ordonnée. Ensuite on peut avoir la valeur sélectionnée par l'accès au texte de la balise span, où l'élément sélectionné est mis ou affichée.

 / / Capturer l'événement de changement de la boîte Transformé Sélectionnez utilisant la méthode modifiée de capturer l'événement de changement de valeur.
 $ ("# Box-âge div.jqTransformSelectWrapper ul li a"). Click (function () {
	 var value = $ ("# durée div.jqTransformSelectWrapper box-âge»). text ()
	 alert ("Valeur sélectionnée =" + valeur);
	 return false; / / empêcher l'action par défaut du navigateur
 });

Conclusion

C'est une façon de simuler la fonction de changement d'déroulant liste les boîtes après avoir utilisé jqTransform pour les personnaliser. L'autre option consiste à modifier le plugin jqTransform soi accéder correctement l'événement onChange de la 'Select' boîtes. J'espère que le plug-in jqTransform développeurs peuvent corriger ce problème dans leur prochaine version du plug-in. Bien que ce n'est pas un bug très important ou commune, mais j'espère que cela a été de quelque secours.

Tags: CSS , formulaires , jqTransform , jQuery
Publié dans Tutoriels | 71 Commentaires »