Wie ein Fach CSS3 Control definieren

Alle jQuery UI-Widgets bieten sich für CSS3 Anpassung. Die meisten der Änderungen, die Sie beschäftigen sich mit mit integrierten Funktionen korrekt. Sie können auch mit der CSS, die jQuery UI beschäftigt arbeiten, um die Widgets zu formatieren, um Spezialeffekte zu erzeugen.

Natürlich, wenn nichts anderes, können Sie immer javascript verwenden, um die tatsächliche Widget Verhalten zu ändern, wie gebraucht. Der Punkt ist, dass man Widgets ändern können (wie Spinner) spezifischen Bedürfnisse zu erfüllen, ohne das Rad neu zu erfinden. Die Änderungen sind in der Regel kurz und einfach zu tun, das heißt, Sie müssen nicht von Grund auf mit einer Idee, die Sie von Hand-Code haben starten.

Spinners sind beliebt, weil sie verwendet werden können Benutzereingabe in einer Anzahl von Weisen zu steuern. Die Idee ist, die Kontrolle für Daten zur Verfügung zu stellen, die normalerweise variabel ist, so kann man nicht so etwas wie ein Dropdown-Listenfeld verwenden. Eine der interessantesten Anwendungen von Spinnern gezeigt auf Ben weiß-Code Standort.

In diesem Fall zeigt der Autor, wie Aufgaben auszuführen, wie sich die Position der Pfeile zu bewegen und eine alphabetische Spinner zu schaffen. Als Beispiel dient hier spielt das Beispiel auf dieser Seite aus, aber es ist ein bisschen einfacher und leichter zu verstehen. Sobald Sie dieses Beispiel zu verstehen, können Sie auf den Ben gehen Knows-Code-Website und zu verstehen, dass beispielsweise sofort.

Spinners normalerweise mit numerischer Eingabe befassen. Allerdings könnten Sie stattdessen ein Bedürfnis nach der alphabetischen Eingabe haben. Um einen alphabetischen Eingabe zu erstellen, müssen Sie das Aussehen von Briefen zu geben, ohne tatsächlich Buchstaben zu verwenden, da die Spinner-Widget nur mit Zahlen arbeitet. Das folgende Beispiel nimmt eine Standard-jQuery UI Spinner Widget und wandelt sie Buchstaben statt Zahlen zu verwenden.

$ (Function () {var Current = 65-var ThisSpinner = $ ( "# Spinner") Spinner ({// Stellen Sie die minimale, um den Code für A // und das Maximum, um den Code für Z.min. 65, max: 90, // Wenn der Benutzer beginnt, den Spinner zu drehen, // den Wert in eine Zahl umwandeln und die // Text aus view.start verstecken: function (ui, event) {ThisSpinner.spinner ( "value", Current ) - $ ( "# Spinner") CSS ( "Farbe", "transparent") -.}, // Wenn der Benutzer aufhört, den Spinner Spinnen, // den numerischen Wert speichern, wandelt es in ein // Brief und Anzeige der Text onscreen.stop: function (ui, event) {Current =ThisSpinner.spinner("value")-ThisSpinner.spinner("value",String.fromCharCode(CurrentValue))-$("#Spinner").css("color", "grün")-}})-})-

Der Code beginnt mit dem Anlegen einer Variablen Current, die den numerischen Wert des Spinners verfolgt. Der Wert, 65, ist der numerische Äquivalent des Schreibens EIN. So beginnt der Spinner mit einem Wert von A, aber er speichert diesen Wert als Nummer 65.

Erstellen der Spinner, ThisSpinner, als nächstes kommt. Sie müssen Minimal- und Maximalwerte festgelegt, die die numerischen Werte reflektieren von EIN und Z. Die gleiche Technik kann für jede Folge von Buchstaben arbeiten. Sie könnten nur verwenden, wie leicht Kleinbuchstaben, falls gewünscht. Für diese Angelegenheit wird jede Serie arbeiten, einschließlich Sonderzeichen. Es ist sogar möglich, diesen Ansatz für Aufzählungswerte zu verwenden.

Der einfachste Ansatz bietet Handler für den Start und Ereignisse zu stoppen. Wenn der Benutzer eine der beiden Pfeile klickt, startet er einen Spin-Ereignis. Die Änderung auftritt, und dann wird die Spinnstellen. Für die Spinner richtig funktioniert, muss der Wert Attribut einen numerischen Wert enthalten.

Der Code legt Wert auf Current, was der Code, der auf den aktuell ausgewählten Buchstaben entspricht. Doch an diesem Punkt können Sie den numerischen Wert als Text in der Spinner sehen, was störend ist. Um dies zu verhindern, geschieht, setzt die Event-Handler auch die Textfarbe transparent, so kann der Benutzer nicht tatsächlich den Text auf dem Bildschirm zu sehen.

Stellen Sie sicher, dass Sie darüber nachdenken, wie Sie setzen die Farben für versteckte Gegenstände. Es gibt eine Tendenz, sich mit einigen Entwicklern die versteckten Gegenstand der Farbe auf die Hintergrundfarbe zu setzen, aber die Hintergrundfarbe ändern. Auch wenn viele Hinweise es eigentlich gar nicht angeben, einer der anerkannten Farben transparent ist, die keine Farbe bedeutet, überhaupt nicht. Verwenden Sie immer transparente Objekte, wenn Sie etwas zu verbergen wollen.

Der Stopp Event-Handler speichert den neuen Spinner Wert in Current. Er wandelt dann den numerischen Wert aus einer Reihe, wie zum Beispiel 65, auf einen Brief, wie EIN. Der Code ändert sich dann die Textfarbe grün, damit der Benutzer am Bildschirm den Brief zu sehen.

In diesem Beispiel wird auch ein paar der Widget Stile. Diese Stile werden als Teil der aufgelisteten jQuery UI CSS-Datei. In diesem Fall wollen Sie nicht die Benutzer in der Lage sein, mehr als ein Zeichen zu geben, so dass die Breite des Widgets geändert wird nur ein Brief zu akzeptieren. Darüber hinaus wird die Textfarbe auf grün, wie hier gezeigt:

.ui-Spinner {width: 45px;}. ui-Spinner-Eingang {color: grün-}

Mit einer Kombination von Ereignissen und CSS können Sie alle Arten von benutzerdefinierten Effekte mit einem der jQuery UI-Widgets erstellen. Alles, was Sie tun müssen, ist ein wenig experimentieren einige wirklich interessante Ausgabe zu erstellen.