Share
In diesem Lernprogramm verwenden wir das Widget für die jQuery-Benutzeroberfläche, um einen attraktiven und funktionalen Schieberegler für Inhalte zu erstellen. Wir haben einen Container, der eine Reihe von Elementen enthält, die jeweils unterschiedliche Inhaltsblöcke enthalten. Es werden zu viele dieser Elemente gleichzeitig angezeigt, sodass wir den Schieberegler verwenden können, um die verschiedenen Inhaltsblöcke ein- und auszublenden.
Die jQuery-Benutzeroberfläche ist die offizielle Bibliothek von Widgets und Dienstprogrammen, die auf jQuery aufbaut. Es ist sehr einfach zu bedienen, hoch konfigurierbar und robust und extrem einfach zu gestalten. Um das Tutorial zu verfolgen, benötigen Sie eine Kopie der neuesten Version der Bibliothek. Sie können ihn mit dem Download-Generator von jQuery UI unter http://jqueryui.com/download herunterladen. Obwohl wir eines der verfügbaren Designs auswählen können, würde ich empfehlen, das Standarddesign Glätte zu verwenden. Die jQuery-Benutzeroberfläche enthält eine Kopie der aktuellen Version von jQuery, sodass wir diese nicht separat herunterladen müssen.
Erstellen Sie einen neuen Ordner an einem geeigneten Ort und nennen Sie ihn Schieberegler. Erstellen Sie in diesem Ordner zwei neue Ordner. Jqueryui genannt und Bilder genannt. Entpacken Sie das heruntergeladene Archiv der Bibliothek in den Ordner jqueryui. In Explorer oder Finder sollten Sie die folgende Ordnerstruktur erhalten:
Beginnen wir zuerst mit der Basisseite und dem zugrunde liegenden HTML-Code. In Ihrem Texteditor erstellen Sie folgende Seite:
jQuery UI Slider Einige bekannte galaktische Nebel und ihre lebenswichtigen Statistiken
Omega-Nebel
- Entfernung von der Erde:
- 5000 - 6000 Lichtjahre
- Durchmesser:
- 15 Lichtjahre
- Masse:
- 800 Sonnenmassen
- Katalognummer:
- M17 / NGC6618
- Entdeckt in:
- 1764
- Entdecker:
- Philippe Loys de Chéseaux
Speichern Sie dies als slider.html im Slider-Ordner. Im Kopf der Seite führen wir einen Link auf das Stylesheet für die jQuery-Benutzeroberfläche, das alle CSS enthält, die für die einzelnen Bibliothekskomponenten erforderlich sind. Es mag wie eine Verschwendung erscheinen. In gewisser Weise ist es so, als würden wir nur eine einzelne Komponente verwenden, aber ein 26-KB-Stylesheet. Wenn Sie jedoch ein Tool wie YUICompressor verwenden, können wir dies leicht verkleinern, und auch mit GZipping können wir es noch weiter reduzieren. Wir haben auch einen Link zu unserem eigenen Stylesheet, das wir später erstellen werden.
Wir haben noch kein Styling hinzugefügt, aber als Referenz zeigt der folgende Screenshot das Standard-Schieberegler-Widget:
Auf der Seite haben wir nur den Aufschlag für den Inhalt und den Schieberegler. Wir haben ein äußeres Containerelement, dem wir den Klassennamen ui-corner-all gegeben haben. Dies ist eine der Klassen, auf die das jQuery-UI-Stylesheet abzielt, und gibt unserem Container (und den anderen Elementen, denen wir ihn geben) schöne abgerundete Ecken. Es verwendet CSS3, um dies zu erreichen, so dass nicht alle Browser unterstützt werden, aber Firefox-, Safari- oder Chrome-Benutzer werden sie sehen.
Innerhalb des Containers befindet sich ein Überschriftenelement, das den Inhalt beschreibt, gefolgt von einem anderen Containerelement (das in unterstützten Browsern auch abgerundete Ecken aufweist). Wenn wir das CSS hinzufügen, erhält dieses Element eine Überlaufregel für ausgeblendet, die die meisten der einzelnen Inhaltsblöcke verbirgt und uns ermöglicht, sie mithilfe des Schiebereglers in den Blickbereich zu verschieben. Dieses Element fungiert als Viewer.
Im Betrachter haben wir ein abschließendes Containerelement; Der Grund dafür liegt in der Leistung. Wenn wir die linke CSS-Eigenschaft mit jQuery anpassen, werden wir nur ein Element auswählen und bearbeiten, statt wie viele Inhaltsblöcke vorhanden sind. Wir verwenden einen anderen Klassennamen aus der Benutzeroberflächenbibliothek für dieses Element - die Ui-Helper-Clearfix-Klasse, die automatisch floated-Elemente in dem Element löscht, auf das sie angewendet wird.
Es folgt ein Beispiel für einen Inhaltsblock. Ich habe nur eines davon im obigen Codebeispiel gezeigt, weil mehr zu zeigen, unnötige Wiederholungen wäre. In der Quelldatei befinden sich sieben, aber Sie können so viele einfügen, wie Sie möchten, und der Schieberegler funktioniert weiterhin wie gewünscht. Jeder Inhaltsblock enthält eine Überschrift, ein Bild und eine Definitionsliste, die semantisch wahrscheinlich die beste Wahl für dieses Beispiel ist, in anderen Implementierungen jedoch nicht unbedingt erforderlich. Die Inhaltsblöcke können so ziemlich alles haben, was sie brauchen, vorausgesetzt, jeder Container hat eine feste Größe. Sie werden sehen, warum dies wichtig ist. Wir werden das JavaScript später hinzufügen.
Nach dem Viewer-Element wird ein leerer Container angezeigt, der in das Slider-Widget umgewandelt wird, sobald die UI-Bibliothek aufgerufen wird. Dies ist alles HTML, das wir benötigen. Anschließend verbinden wir uns mit jQuery und den Quelldateien der jQuery-Benutzeroberfläche. Diese Datei enthält alle JavaScript-Elemente, die zum Ausführen der gesamten UI-Bibliothek erforderlich sind. Für dieses Lernprogramm ist mehr als nötig. Für den Kern und für jede Komponente gibt es separate Dateien, die den Platzbedarf der Bibliothek reduzieren können. Die JS-Dateien jQuery und jQuery UI sind bereits minimiert.
In Wahrheit müssen wir uns keine Gedanken darüber machen, wie man das Slider-Widget selbst gestaltet. Das Thema, das wir mit der Bibliothek heruntergeladen haben, wird das für uns tun. Das CSS, das wir gerade hinzufügen, ist für dieses Tutorial ziemlich rein willkürlich, um Dinge aufzuräumen und ihm ein minimales Aussehen zu geben. Solange die einzelnen Inhaltsblöcke (mit einem Klassennamen des Elements) eine feste Breite haben und innerhalb des Förderelements nach links verschoben werden, und sofern der Überlauf des Betrachters auf "Ausblenden" eingestellt ist, sollte alles wie erwartet funktionieren.
Fügen Sie in einer neuen Datei in Ihrem Texteditor den folgenden Code hinzu:
h2 text-align: center; Schriftart: normal 150% Georgia; #sliderContent width: 650px; Marge: auto; Polsterung: 0 50px 50px; Hintergrundfarbe: #ebeb; Grenze: 1px fest # 898989; .viewer width: 607px; Höhe: 343px; Marge: 0 Auto 40px; Polsterung: 1px; Überlauf versteckt; Position: relativ; Grenze: 1px fest # 898989; .content-Förderer Breite: 610px; Höhe: 335px; Position: relativ; .item width: 304px; Schwimmer: links; Schriftfamilie: Tahoma; Text ausrichten: Mitte; Hintergrundfarbe: #ebeb; .item h2 font-size: 100%; Marge: 10px 0; .item dl margin: 10px 0; .item dt, .item dd float: left; Breite: 149px; Textausrichtung: rechts; Marge: 0; Schriftgröße: 70%; .item dt font-weight: fett; Rand rechts: 5px; .item dd text-align: left; .item img border: 1px fest # 898989; Hintergrundfarbe: #ffffff; Polsterung: 1px;
Speichern Sie dies als slider.css im Slider-Ordner. Unsere Seite sollte jetzt so aussehen:
Jetzt müssen wir nur noch das JavaScript hinzufügen, das den Schieberegler initialisiert und unsere Inhaltsblöcke steuert. Direkt nach dem Skriptelement, das mit der jQuery-Benutzeroberfläche in slider.html verknüpft ist, fügen Sie den folgenden Code hinzu:
Es ist ein sehr kurzer, einfacher Code-Schnipsel, bei dem sehr wenig los ist. Betrachten wir es Zeile für Zeile. In der Abkürzung document.ready haben wir zunächst einige Variablen eingerichtet, damit wir die Elemente auf der Seite zwischenspeichern können, die wir aus Leistungsgründen bearbeiten. Dadurch läuft unser Code schneller, da wir nur das DOM durchlaufen und jedes Element einmal auswählen.
Wir wählen das Förderelement zuerst durch Anvisieren seines Klassennamens; Da die Verwendung eines Klassenselektors ineffizient ist, geben wir dem Selektor einen Kontext des sliderContent-Elements. Der Kontext wird mithilfe eines ID-Selektors bereitgestellt, sodass das gesamte DOM nicht durchlaufen werden muss. Wir wählen auch die Sammlung von Inhaltsblöcken auf dieselbe Weise aus.
Nachdem wir unsere Selektoren zwischengespeichert haben, können wir die Länge des Förderelements einstellen. In CSS wurde die Breite von zwei Inhaltsblöcken festgelegt. Damit sie korrekt funktionieren können, müssen die Inhaltsboxen nebeneinander schweben, sodass der Förderer breit genug sein muss, um alle aufnehmen zu können.
Damit wir nicht einschränken, wie viele Inhaltsblöcke in das Widget eingefügt werden können, kodieren wir keine festgelegte Breite. Stattdessen erhalten wir die Anzahl der Inhaltsblöcke und multiplizieren diese mit der Breite jedes Blocks. Deshalb ist es wichtig, eine feste Breite für die Blöcke festzulegen. Wir müssen die parseInt-Funktion von JavaScript verwenden, wenn wir die Breite der Blöcke abrufen, da die jQuery-Methode css einen String-Wert im Getter-Modus zurückgibt.
Als Nächstes erstellen wir ein literales Konfigurationsobjekt, das an die jQuery-UI-Slider-Methode übergeben wird und zum Festlegen einiger Eigenschaften des Slider-Widget verwendet wird. Unser Konfigurationsobjekt hat zwei Eigenschaften, Max und Slide. Der Wert der Eigenschaft max ist eine ganze Zahl, die die Breite des Förderelements minus der Breite des Betrachters darstellt. Dies ist der maximale Wert, den der Schieberegler erreichen kann.
Der Wert der Slide-Eigenschaft ist eine anonyme Funktion, die automatisch zwei Argumente erhält. das ursprüngliche Ereignisobjekt und ein vorbereitetes Objekt, das nützliche Eigenschaften in Bezug auf das Widget enthält. Wir verwenden nicht das erste Argument, das wir als e definieren, sondern müssen es einschließen, um Zugriff auf das zweite Argument zu erhalten, das wir als ui bezeichnen.
Das Folienereignis ist ein benutzerdefiniertes Ereignis, das von der Schieberegler-API verfügbar gemacht wird. Die Funktion, die wir als Wert festlegen, wird bei jeder Folieninteraktion aufgerufen. Wenn das Ereignis ausgelöst wird, manipulieren wir einfach die linke Stileigenschaft unseres Förderelements um den Betrag, um den der Schieberegler verschoben wird. Wir können den Wert erhalten, zu dem der Schieberegler verschoben wird, indem Sie die value -Eigenschaft des UI-Objekts verwenden.
Wir setzen den Maximalwert des Schiebereglers auf die Länge des Förderelements. In diesem Beispiel sind es 2128px, der Maximalwert ist also 2128. Dies ist nicht in Pixeln, wie im nächsten Screenshot gezeigt Der Schieberegler selbst ist ungefähr 650px lang. Wenn Sie den Schieberegler jedoch ungefähr zur Hälfte entlang der Spur bewegen, liegt der im UI-Objekt gemeldete Wert bei etwa 1064, sodass wir den linken Rand des Förderers um viele Pixel nach links oder rechts verschieben.
Wir müssen uns keine Sorgen darüber machen, in welche Richtung der Schieberegler bewegt wurde. Wenn der Schieberegler bereits nach rechts verschoben wurde, hat die linke CSS-Eigenschaft, wenn der Förderer bereits einen negativen Wert hat. Wenn wir eine negative Zahl von einer negativen Zahl abziehen, ist das Ergebnis natürlich eine positive Zahl, so dass sich der Förderer wie gewünscht zurückbewegt. Die vollständige Seite sollte jetzt mit dem Schieberegler angezeigt werden:
Sie sollten feststellen, dass es wie erwartet funktioniert und die verschiedenen Inhaltsblöcke mithilfe des Schieberegler-Widget ein- und ausgeblendet werden können. Neben der Standard-Drag-Interaktion ist auch das Hinzufügen einer Klick-Interaktion sinnvoll in den Schieberegler integriert. Wenn Sie irgendwo auf die Spur klicken, wird der Ziehpunkt automatisch an diese Position verschoben und die Slide Callback-Funktion wird ausgeführt.
In diesem Lernprogramm haben wir uns angesehen, wie der zugrunde liegende HTML-Code für den Schieberegler (ein einfacher leerer Container) verwendet wurde, wie das Standardstyling der Bibliothek angewendet wird und wie er mit unserem Code konfiguriert und initialisiert werden kann.
Der Schieberegler ist eine großartige Ergänzung für jedes Interface. Es ist für uns leicht einzurichten und für unsere Besucher einfach zu verwenden, es ist taktil und interaktiv und kann in einer Vielzahl von Situationen verwendet werden, indem Inhalte wie in diesem Beispiel verschoben werden oder als Lautstärkeregler in einer Streaming-Web-App.
Accentsconagua