Codepal

Posts Tagged 'Formen'

Erstellen einer Neon Blink-Effekt für Ihre Formulare mit CSS3 und jQuery

Samstag, 17 Juli, 2010

Nun dank der hellen neuen Kind auf dem Block, CSS3, mit ein bisschen jQuery herausgeputzt, werde ich Ihnen zeigen, wie eine raffinierte Effekt auf Ihre Formulare verbessern zu bauen.

Bin sicher, dass dieses coole Neon blink-Effekte in Form sein werden nützlich für viele Zwecke so nicht vermisse meine Tutorial auf 1stWebDesigner.com .

In diesem Tutorial haben wir die Verwendung von @-webkit-Keyframes, die funktioniert nur in Browsern mit der Webkit-Layout-Engine wie Chrome und Safari gemacht. Für Browser, wie Firefox und Opera, wo es keine Alternative gibt, müssen wir anmutig beeinträchtigen die Wirkung, die in diesem Fall wird nur ein box-shadow werden auf den Fokus. Internet Explorer (bis Version 8) kann nicht machen das meiste, was wir hier lernen, aber IE 9 scheint sehr vielversprechend zu sein von dem, was ich in den letzten Platform Preview gesehen.

Tags: CSS 3 , Entwicklung , Formen , wie man , jQuery
Posted in Tutorials | 4 Kommentare »

Die 'Select' Problem nach der Verwendung jqTransform und ihre Lösung

Donnerstag, 18. Februar, 2010

Das Projekt

In diesem jüngsten Projekt von mir, ich war erforderlich, um eine Landing Page zu erstellen. In dieser Landing Page, gäbe es eine Liste der Sprachen und nachdem der Benutzer eine bestimmte Sprache, die Homepage der Website wäre automatisch geöffnet in der jeweils gewählten Sprache. Es war auch erforderlich, um Stil der Listenfeld in der Weise in die Gestaltung der Landing-Page gegeben wurde. So entschied ich mich für die jqTransform jQuery-Plug-in, das ich einst Stil einige Formen. jqTransform ist sehr schön Plug-in, die Formen in eine sehr einfache Weise anpassen und das Endprodukt ist ohne Zweifel schön. Aber in diesem Fall wurde es eine kleine Geschwindigkeit Leistungsschalter, um meine Fortschritte.

Das Problem

Die Dropdown-Liste die Kontrolle über die HTML-Formular enthält die 'select' Tags, welche die verschiedenen 'Option' Tags umschließen. Hier ist eine Form, die ich in diesem Tutorial benutze, um das Problem zu erklären:

 <form>
	 <h4> Select Box Ohne jqTransform </ h4>
	 <div id="box-city" class="select-menus">
		 <label> City </ label>
		 <br/>
		 <select name="select-country">
  		         <option> Gotham </ option>
			 <option> New York City </ option>
			 <option> Smallville </ option>
		 </ Select>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Was jqTransform tut, ist, scannt er das gesamte "wählen Sie" Tag und schafft eine ungeordnete Liste mit Hyperlinks für die Optionen in der Drop-Down-Liste. Es versteckt sich dann das Original "wählen Sie" Tag und seinen Inhalt.

 <form class="jqtransform jqtransformdone">
	 <h4> Select-Box mit jqTransform und normal wählen Change-Methode </ h4>
	 <div class="select-menus" id="box-name">
		 <label style="cursor: pointer;"> Name </ label>
		 <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			 <div>
				 <span style="width: 119px;"> Batman </ span>
				 <a class="jqTransformSelectOpen" href="#"> </ a>
			 </ Div>
                         <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				 <li> <a index="0" href="#" class="selected"> Batman </ a> </ li>
				 <li> <a index="1" href="#"> Robin </ a> </ li>
				 <li> <a index="2" href="#"> Superman </ a> </ li>
				 <li> <a index="3" href="#"> 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>

Das schafft kein Problem, wenn wir die 'select' tag verwenden in der Regel für die Auswahl eines bestimmten Wertes und dem anschließenden Übermittlung des Formulars durch einen Submit-Button. Es schafft ein Problem, wenn wir eine Funktion ausführen, wenn der Wert der Dropdown-Liste geändert werden soll.

Dies ist normalerweise in Javascript, indem Sie die "Ändern"-Methode des select-Steuerung erreicht. Der "Wandel"-Methode erfasst den Wert-change-Ereignis, und wir können den Wert durch den Benutzer in der folgenden Weise ausgewählten Zugang.

 / / Capturing the change-Ereignis der nicht-transformierten Select Box.
 $ ("# Box-Stadt wählen"). Ändern (function () {
	 var value = $ (this) val ().;
     alert ("Value Selected =" + value);
 });

Aber nach der Verwendung der jqTransform Plugin ist die 'select' Tag nicht mehr da, um die Änderung Methode anzuwenden.

Die Lösung

Die Lösung für dieses ist ein sehr einfaches. Wir können das Change-Ereignis für die jqTransformed Dropdown-Liste zu simulieren, indem ein Klick-Funktion, die hyper-link-Element in der unsortierten Liste. Dann können wir den ausgewählten Wert durch den Zugriff auf den Text der span-Tag, wo das ausgewählte Element gesetzt oder angezeigt haben.

 / / Capturing the change-Ereignis der transformierten Select Box mit der modifizierten Methode der Erfassung der Wertänderung Veranstaltung.
 $ ("# Box-age div.jqTransformSelectWrapper ul li a"). Click (function () {
	 var value = $ ("# box-age div.jqTransformSelectWrapper span"). text ()
	 alert ("Value Selected =" + value);
	 return false; / / verhindern, Standard-Browser Aktion
 });

Abschluss

Dies ist eine Möglichkeit, die Simulation der Änderungsfunktion für Drop-down-Listenfelder nach der Verwendung von jqTransform, um sie anzupassen. Die andere Möglichkeit ist es, die jqTransform Plugin selbst zu modifizieren, um richtig auf die onChange Ereignis des 'Select' Boxen. Ich hoffe, die jqTransform Plug-in-Entwickler können dieses Problem in der nächsten Version des Plug-in zu beheben. Obwohl dies nicht eine sehr wichtige oder häufig Fehler, aber ich hoffe, dass dies von einigen helfen konnte.

Tags: CSS , Formulare , jqTransform , jQuery
Posted in Tutorials | 71 Kommentare »