Startseite » Codierung » Erstellen eines Volume Controllers mit dem jQuery UI Slider
Erstellen eines Volume Controllers mit dem jQuery UI Slider
Wenn Sie ein Freebies-Jäger sind, haben Sie wahrscheinlich viele PSD-Benutzeroberflächen (UI) heruntergeladen. Einige von ihnen sind wirklich erstaunlich und könnten unsere Zeit sparen, indem wir das Design, an dem wir gearbeitet haben, prototypisieren.
In diesem Beitrag werden wir eine PSD-Benutzeroberfläche programmieren und sie in etwas mehr Funktionelles umwandeln. Wir werden den folgenden PSD-UI-Slider so programmieren, dass er als jQuery-UI-Slider-Design verwendet wird.
jedoch, beachten Sie bitte für das dieses Tutorial bestimmt ist Zwischenstufen von Erfahrung. Trotzdem ist es immer noch relativ leicht zu folgen, solange Sie mit CSS und jQuery ziemlich vertraut sind.
Alles klar, jetzt lass uns anfangen.
Schritt 1: Die jQuery-Benutzeroberfläche
Wir benötigen offensichtlich die jQuery und die jQuery UI Library, und wir haben zwei Möglichkeiten, sie zu nutzen. Erstens können wir jQuery und die jQuery-Benutzeroberfläche direkt von folgendem CDN aus verknüpfen: Google Ajax API CDN, Microsoft CDN und jQuery CDN. Die Verwendung der gehosteten CDN-Datei bietet viele Vorteile, wenn wir unsere Website online stellen.
Da wir jedoch nur offline daran arbeiten werden, verwenden wir die zweite stattdessen.
Wir werden die jQuery UI-Bibliothek von der offiziellen Download-Seite herunterladen und anpassen. Da wir nur das Slider-Plugin benötigen, werden wir nur die Slider-Bibliothek mit ihren Abhängigkeiten auswählen und die anderen verlassen. Auf diese Weise werden die von uns verwendeten Dateien viel schlanker und können schneller geladen werden. Verknüpfen Sie anschließend alle diese Bibliotheken mit dem HTML-Dokument, vorzugsweise am unteren Rand der Seite oder vor dem Schließen
um genau zu sein.
Schritt 2: HTML-Markup
Das Markup für den Slider ist sehr einfach. Wir haben alle notwendigen Markups - den Tooltip, den Slider und das Volume - in ein HTML5-Paket eingebunden Sektion Etikett. Die jQuery-Benutzeroberfläche generiert dann automatisch den Rest.
Schritt 3: Installieren Sie die Slider-Benutzeroberfläche
Das folgende Snippet installiert den Slider auf der Seite, wendet jedoch nur die Standardkonfiguration an.
$ (function () $ ("#slider") .slider (););
Hier werden wir den Slider ein wenig verbessern, indem wir andere Konfigurationen hinzufügen.
Zunächst speichern wir das Slider-Element als Variable.
var slider = $ ('# slider'),
Dann setzen wir den minimalen Standardwert des Schiebereglers auf ungefähr 35, wenn es zuerst geladen wird.
slider.slider (Bereich: "min", Wert: 35,);
Zu diesem Zeitpunkt sehen wir noch nichts im Browser, da die jQuery-Benutzeroberfläche vorhanden ist im Grunde nur das Markup erzeugen. Wir müssen also einige Stile anwenden, um das Ergebnis visuell im Browser anzuzeigen.
Schritt 4: Die Stile
Bevor Sie fortfahren, benötigen wir einige Elemente aus der PSD-Quelldatei, wie z. B. die Hintergrundtextur und das Symbol.
Wir werden nicht darüber reden wie man schneidet In diesem Artikel konzentrieren wir uns nur auf den Code. Wenn Sie sich nicht sicher sind, wie Sie schneiden sollen, schauen Sie sich zuerst den folgenden Screencast an, bevor Sie fortfahren.
Konvertierung eines Designs von PSD in HTML - Nettuts+
Nun gut, jetzt fangen wir an, die Stile hinzuzufügen.
Wir beginnen damit, den Schieberegler in der Mitte des Browserfensters zu positionieren und den Hintergrund, den wir aus der PSD herausgeschnitten hatten, an den Browser anzuhängen Karosserie.
body background: url ('… /images/bg.jpg') wiederhole oben links; Abschnitt Breite: 150px; Höhe: Auto; Marge: 100px auto 0; Position: relativ;
Als Nächstes werden wir die Stile für anwenden der Tooltip, die Lautstärke, der Griff, der Schieberegler Angebot und das Schieberegler selbst.
Wir werden das Teil für Teil machen, beginnend mit…
Schieberegler
Da wir den Maximalwert für den Slider selbst nicht definiert haben, wird die jQuery-Benutzeroberfläche den Standardwert anwenden. das ist 100. Daher können wir uns auch bewerben 100 (px) für den Schieberegler Breite.
Wir haben das Lautstärkesymbol an unsere Idee angepasst. Die Idee ist, dass wir einen Effekt erzeugen werden Erhöhen Sie die Lautstärke langsam entsprechend dem Wert des Schiebereglers. Ich bin sicher, dass Sie einen solchen Effekt oft in einer Media Player-Benutzeroberfläche gesehen haben.
Der Griffstil ist ziemlich einfach; Es wird ein Symbol angezeigt, das wie ein metallischer Kreis aussieht, aus der PSD geschnitten und als Hintergrund angehängt ist.
Wir ändern auch den Cursor-Modus in Zeiger, Der Benutzer wird also feststellen, dass dieses Element ziehbar ist.
In diesem Schritt arbeiten wir am Spezialeffekt des Sliders.
QuickInfo
Zu diesem Zeitpunkt hat der Tooltip noch keinen Inhalt, also füllen wir ihn mit dem Wert des Schiebereglers. Außerdem entspricht die horizontale Position des Tooltips der Position des Griffs.
Zunächst speichern wir das Tooltip-Element als Variable.
var Tooltip = $ ('. Tooltip');
Dann definieren wir den oben genannten Effekt des Tooltips im Slide-Event.
slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);
Wir möchten jedoch, dass der Tooltip zunächst ausgeblendet wird.
tooltip.hide ();
Danach, wenn die Griff beginnt zu gleiten, wird es mit einem Einblendeffekt angezeigt.
start: function (event, ui) tooltip.fadeIn ('fast'); ,
Wenn der Benutzer aufhört, den Griff zu verschieben, wird der Tooltip ausgeblendet und ausgeblendet.
stop: function (event, ui) tooltip.fadeOut ('fast'); ,
Volumen
Wie wir oben schon erwähnt haben Abschnitt Styles, Wir planen, das Lautstärkesymbol entsprechend der Position des Griffs zu ändern oder genau zu sein, Der Wert des Schiebereglers. Wir werden also die folgende Bedingungsanweisung anwenden, um diesen Effekt zu erzeugen.
Zunächst speichern wir jedoch das Volumenelement sowie den Wert des Schiebereglers als Variable.
Volumen = $ ('. Volumen');
Dann starten wir die Bedingungsanweisung.
Wenn der Wert des Schiebereglers niedriger oder gleich ist 5 Das Lautstärkesymbol enthält keine Balken. Dies bedeutet, dass die Lautstärke sehr niedrig ist. Wenn der Wert des Schiebereglers jedoch steigt, steigt auch der Lautstärkebalken an.
if (Wert <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
Setze sie alle zusammen
In Ordnung, falls Sie mit all dem oben genannten Zeug verwechselt werden, ist dies nicht der Fall. Hier ist die Abkürzung. Tragen Sie alle folgenden Codes in Ihr Dokument ein.
$ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (Bereich: "min", min: 1, Wert: 35, start: function (event, ui) tooltip.fadeIn ('fast');, Folie: function (event, ui) var value = slider.slider ('value'), volume = $ ('. Volume '); tooltip.css (' left ', value) .text (ui.value); if (value <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ; , stop: function(event,ui) tooltip.fadeOut('fast'); , ); );
In Ordnung, lassen Sie uns jetzt das Ergebnis im Browser anzeigen.
Demo
Quelle herunterladen
Fazit
Heute haben wir erfolgreich ein eleganteres jQuery-UI-Design erstellt, gleichzeitig haben wir jedoch auch eine PSD-Benutzeroberfläche erfolgreich in einen funktionalen Lautstärkeregler übersetzt.
Wir hoffen, dieses Tutorial inspiriert Sie und könnte Ihnen helfen zu verstehen, wie aus einer PSD ein brauchbareres Produkt wird.
Wenn Sie Fragen zu diesem Lernprogramm haben, fügen Sie diese bitte in den Kommentarabschnitt unten ein.
