Die Benutzeroberfläche von JQuery kann einer Webseite so viel hinzufügen. Die Benutzeroberfläche bietet viele verschiedene Widgets. Ein aufstrebender Stern ist der Schieber. In diesem Tutorial zeige ich Ihnen, wie Sie mit einem Schieberegler die Textgröße eines Artikels auf einer Seite steuern. Auf diese Weise kann der Benutzer genau die Größe steuern, die zu ihm passt, und er kann auch auf einer Website beeindruckend sein!

Der Schieberegler dieses Tutorials reproduziert eine von Buck Wilson ursprünglich entwickelte Technik.

Unser Ziel

Wir möchten, dass unsere Seite in etwa so aussieht:

Verhalten:

• Wenn der Schieberegler gezogen wird, wird eine Blase eingeblendet, die die aktuelle Größe angibt.
• Der Text "Aktuelle Textgröße" wird auch neben der aktuellen Textgröße angezeigt.
• Wir werden auch versuchen, den Text beim Klicken auf das Plus- oder Minuszeichen um ein Pixel zu erhöhen oder um ein Pixel zu verringern.

Schritt 1: Holen Sie sich die notwendigen Javascript-Dateien

Natürlich brauchen wir JQuery, aber wir werden auch einige UI-Dateien benötigen, um JQuery zu erweitern. Auf der Seite JQuery UI Build Your Download können Sie eine UI-Datei erhalten, die an unsere Bedürfnisse angepasst ist.

Wie Sie sehen, gibt es einige wirklich großartig klingende Effekte! So verlockend es auch sein mag, wir brauchen nicht alle diese Effekte, um das gewünschte Produkt zu erzielen. Alles was wir brauchen ist:

• UI-Kern
• Schieberegler
• Cookie-Plugin von Klaus Hartl

Schritt 2: Das HTML

Für dieses Tutorial werde ich keine Zeit damit verschwenden, die Grundlagen von HTML zu erläutern und ein Layout unter Verwendung von HTML und HTML zu erstellen. Wenn Sie mehr darüber erfahren möchten, finden Sie hier weitere Tutorials wie das Top Panel-Tutorial oder das Collis-Tutorial mit Registerkarteninhalt.

            
 
 
 
 
 
 
 
 
 
 
 
Textgrößenschieberegler
 
Aktuelle Schriftgröße:  
 
 Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere vom Typ nahm und daraus ein Musterheft machte. Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert bleibt. In den 1960er Jahren wurde es mit der Veröffentlichung von Letraset-Blättern mit Lorem Ipsum-Passagen populärer gemacht, und in jüngerer Zeit mit Desktop-Publishing-Software wie Aldus PageMaker, einschließlich Versionen von Lorem Ipsum. 
 
   

So werden Sie einige Dinge bemerken:

1. Der PNG-Fix für IE 5.5 und 6. Ich habe direkt auf die Google-Codeseite verlinkt. Dies bedeutet, dass ich jedes transparente PNG mit einer -trans.png beenden muss .
2. Ich habe auch direkt mit JQuery und unserer benutzerdefinierten UI-Datei verlinkt.
3. Ich habe die notwendigen Tags für den Slider in den #Header eingefügt

HINWEIS: Damit der Schieberegler funktioniert, benötigen wir eine Leiste und einen Griff.

Schritt 3: Das CSS

Hier ist das CSS, damit diese Seite ein bisschen besser aussieht. Diese Seite ist ziemlich einfach und daher ist auch das CSS ziemlich einfach:

 Körper Hintergrund: # 373737; Text ausrichten: Mitte; Marge: 0px;  #header width: 700px; Höhe: 200px; Hintergrund: # 48887d URL (images / header.jpg); Rand links: auto; Rand rechts: auto; Position: relativ;  .slider_container position: absolut; Höhe: 25px; oben: 170px; links: 165px;  .minus background: url (images / minus-trans.png) no-repeat; Höhe: 9px; Breite: 25px; Überlauf versteckt; Schwimmer: links; Cursor: Zeiger;  .slider_bar background: url (images / bar-trans.png) no-repeat; Höhe: 9px; Breite: 316px; Schwimmer: links; Marge: 0px 5px; Position: relativ;  .add background: url (images / add-trans.png) no-repeat; Höhe: 25px; Breite: 23px; Schwimmer: links; Position: relativ; oben: -5px; Cursor: Zeiger;  .slider_handle background: url (images / selector-trans.png) no-repeat; Höhe: 25px; Breite: 12px; Position: absolut; oben: -8px;  #slider_caption background: url (images / caption-trans.png) no-repeat; Höhe: 45px; Breite: 38px; Überlauf versteckt; Position: absolut; oben: -50px; Rand links: -10px; Auffüllen: 5px 0px 0px 0px; Schriftfamilie: "Myriad Pro"; Farbe: # 36665d; Schriftdicke: fett; Text ausrichten: Mitte;  #text font-family: Helvetica, Arial, serifenlos; Breite: 655px; Hintergrund: # f9f9f9; Rand links: auto; Rand rechts: auto; Polsterung: 20px 20px 20px 25px; Position: relativ;  #text p Schriftgröße: 12px; Text ausrichten: links; Farbe schwarz;  #text h1 text-align: left; Rand links: 20px;  p Schriftfamilie: Arial, Helvetica, serifenlos; Farbe: #CCCCCC;  #font_indicator position: absolut; rechts: 100px; oben: 50px; Schriftgröße: 10px; Anzeige: keine;  

Auch hier werde ich mit CSS nicht ins Detail gehen. Wenn Sie noch weitere Hilfe benötigen, lesen Sie unbedingt die beiden oben erwähnten Tutorials. Wenn Sie Fragen haben, geben Sie mir bitte in den Kommentaren Bescheid.

Beachten Sie, dass alle png-Bilder mit Alphatransparenz die Endung -trans.png haben.

Schritt 4: Grundlegende Slider-Effekte

Als ich zum ersten Mal etwas über den Schieberegler erfuhr, habe ich ihn gegoogelt, um etwas mehr darüber zu erfahren und wie er funktioniert. Ich hatte das Glück, diesen großartigen Screencast zu finden. Es hatte auch eine wirklich nette Wirkung; eine Beschriftung, die die Position des Schiebereglers auf dem Schieberegler anzuzeigen schien. Leider machten sie dort halt. Wir werden eine Variation ihres JQuery-Codes als Startpunkt verwenden:

 $ (function () $ ('# slider_caption'). hide (); var captionVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle'), startValue: 26, minValue: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () captionVisible = true;);, stop: function (e, ui) if ( captionVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css.) ('left')).. text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). animate (fontSize: ui.value * 15/100 + 8 ) .fadeIn ("langsam"); $ ('# slider_caption'). fadeOut ('fast', function () captionVisible = false;);, Folie: Funktion (e, ui) $ ('# slider_caption '). css (' left ', ui.handle.css (' left ')).. text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("langsam"););

Einige Schlüsselideen:

• Zuerst verbergen wir die Bildunterschrift mit Javascript. Dadurch wird die Beschriftung sichtbar, wenn Javascript deaktiviert ist, um die Zugänglichkeit zu verbessern.
• Wie Sie sehen, haben wir jetzt einen .slider-Modifikator und mehrere Unterelemente:
  • Startwert : Dies gibt die Position an, an der der Griff beginnt
  • minValue: Dies gibt den Mindestwert an, zu dem der Handle gehen soll
  • maxValue: Dies gibt den maximalen Wert an, zu dem der Handle gehen soll
  • Start: Dies ermöglicht uns, JQuery mitzuteilen, was zu tun ist, wenn der Benutzer beginnt, die Leiste zu verschieben
  • halt: Dies gibt an, was passiert, wenn der Schieberegler losgelassen wird
  • rutschen: Dies gibt an, was passiert, wenn der Schieberegler verschoben wird
  • Griff: Dies erlaubt uns zu spezifizieren, was der Handle sein wird
• Wir weisen auch eine Variable zu, die uns hilft zu wissen, wann halt: erscheint, ob die Beschriftung sichtbar ist oder nicht, und führt dann eine auf dieser Schlussfolgerung basierende Aktion aus.
• Wir mussten auch die möglichen Schriftgrößen einschränken, so dass wir die Möglichkeiten des Schiebereglers auf 8 bis 23 beschränkten. Dies wurde durch grundlegende Berechnungen des Schiebereglers durchgeführt. (multipliziert mit 15/100 und 8 hinzugefügt)
• Diese Gleichung ergab Dezimalstellengrößen, daher mussten wir die Math.round runden
• Beachten Sie auch, dass die Methode, mit der wir die Beschriftung erstellt haben, auf dem Griff bleibt. Wir haben den linken Wert der CSS-Beschriftung gleich dem Handle gesetzt.
• Beachten Sie das auf der halt: Ich habe die Textgröße animiert, während ich auf der Folie die CSS-Größe ständig ändert. Dies mag kontraintuitiv erscheinen, das an rutschen: Ich würde es nicht animieren, aber durch die Essenz der allmählichen Verschiebung und Vergrößerung der Größe tut es dasselbe. Wenn ich animieren würde, anstatt nur das CSS zu ändern, wäre es abgehackt und nicht ansprechbar.

Schritt 5: Hinzufügen der Textbeschriftung

 $ (function () $ ('# slider_caption'). hide (); var calloutVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle'), startValue: 26, minValue: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator'). FadeIn ('slow') ; stop: function (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator '). fadeIn (' slow '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100.) + 8)); $ ('# font_indicator b'). Text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animieren (fontSize: ui.value * 15/100 + 8). FadeIn ("langsam"); $ ('# slider_caption'). FadeOut ('fast', function () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('slow');, Folie: Funktion (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round ( ui.value * 15/100 + 8)); $ ('# font_indicator b'). text (Math.round (ui. Wert * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("langsam"); );

Wichtige Ideen zu #font_indicator

• Wir haben dieselben Einblend- und Ausblendeffekte an denselben Stellen wie die Bildunterschrift hinzugefügt
• Wir haben die linke Position des CSS jedoch ausgelassen
• Beachten Sie, dass wir eine haben Tag innerhalb des div # font-indikators. Dies hebt nicht nur die Zahl hervor, sondern ermöglicht es uns, den aktuellen Wert des Schiebereglers nur als Text zu verwenden. Wenn wir nur an das Ende des div angefügt wurden, würde sich jeder Schriftgrößenwert am Ende aufstauen.

Schritt 6: Plus- und Minusaktionen geben

Dies wäre kein funktionales Design, wenn wir nicht die Plus- und Minuszeichen-Aktionen beim Klicken angeben würden. Dieser Code ist möglicherweise ein bisschen schlampig und nicht perfekt effizient, aber er erledigt die Arbeit. Dieses Projekt erforderte überraschend viel Mathematik, was einige verrückte Zahlen erklärt, die am Ende verwendet werden.

Ohne weiteres, hier ist der Rest des Javascript, ich erkläre es später:

 $ (". add"). click (function () var currentFontSize = $ ('# text p'). css ('font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1; if (newFontSize < 24)  $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow');  else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow');  return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# text p'). Css ('font-size', newFontSize); $ ('# slider_caption'). css ('left', newFontSize * 19.75 - 158) .fadeIn ('fast'). text (Math.round (newFontSize)). fadeOut (); $ ('. slider_handle'). css ('left', newFontSize * 19.75 - 158); $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text (Math.round (newFontSize)); $ ('# font_indicator'). fadeOut ('slow');  else $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text ("Ist 8 nicht klein genug?"); $ ('# font_indicator'). fadeOut ('slow');  falsch zurückgeben; );

Einige wichtige Anmerkungen:

• Wenn Sie die grundlegende Javascript-Syntax kennen, sollte dies selbstverständlich sein.
• Ich weise eine Anfangsvariable zu, um die aktuelle Schriftgröße zu erhalten.
• Ich konvertiere es dann in eine ganze Zahl
• Ich erstelle dann eine andere Variable, die um einen Wert höher ist.
• Ich stelle ein Limit zwischen 24 und über 8 ein, indem ich ein ansonsten Aussage.

Mathematische Zeit

Die Anpassung des Griffs und der Beschriftung an den Plus- und Minus-Klick war eine echte Herausforderung. Am Ende habe ich die Breite des Takts (316px) ermittelt und diese auf die 16 möglichen Schriftgrößen (8-23) aufgeteilt, um herauszufinden, wie viel Speicherplatz für jedes Inkrement benötigt wird.

316/16 =

Um sicherzugehen, musste ich dann den Startpunkt für die Schriftgröße ermitteln. Ich wusste, dass dies nicht genau 12 war, weil ich es mit 15/100 + 8 etwas modifiziert habe. Also nahm ich den Startwert des Handles (26) und multiplizierte ihn mit

26 * 15/100 + 8 =

Ich dachte mir, da es abgerundet war, wären es sowieso zwölf.

Also dachte ich mir, dass das Handle die [Schriftgröße * 19.75 - 158 (Die ersten 8 Größen)] px sein würde.

Ich dachte nur, dass ich Ihnen einen Einblick in meine komische und über komplizierte Mathematik geben würde;). Es gibt wahrscheinlich viel einfachere Möglichkeiten, dies zu tun, aber ich denke, das ist meine Logik.

Schritt 7: Cookie Time, das Lesen des Cookies

Für den Umgang mit Cookies habe ich das hervorragende Cookie-Plugin von Klaus Hartl verwendet. Sie können die grundlegende Syntax des Plugins in dem von mir bereitgestellten Link anzeigen. Die Herausforderung bestand darin, einen Platz zu finden, der den Keks zuverlässig setzen würde. Am Ende habe ich es eingestellt, wenn der Browser die Seite aktualisiert oder ändert. Auf diese Weise tut es es nur, wenn es notwendig und auch realistisch ist. Zuerst fügen wir den Code oben in die Javascript-Datei ein, um den Cookie zu lesen:

 var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('font-size', startSize);

Was ich getan habe:

• Ich habe das Cookie zuerst gelesen und an die Variable startSize gesendet
• Ich habe diese Variable dann in eine Ganzzahl geändert
• Ich habe diese Nummer dann zur Standard-CSS des Textes hinzugefügt

Schritt 8: Das Cookie einstellen

Wie bereits erwähnt, müssen wir den Cookie setzen, wenn die Seite verlassen wird. Dazu verwenden wir den folgenden Code:

 window.onbeforeunload = leaveCookie; function leaveCookie () var FontSize = $ ('# text p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); 

Was ich getan habe:

• HINWEIS: Diese JS ist draußen der JQuery $ (function () );
• Zuerst habe ich eine Funktion aktiviert, wenn der Browser die Seite verlassen hat
• Dann habe ich die Textgröße in eine Ganzzahl umgewandelt
• Dann füge ich das in den Keks
  

Das ist es!

Ich hoffe, Sie fanden dieses Tutorial hilfreich! Entschuldigen Sie bitte meine Programmierlogik, ich denke nicht immer so effizient: P. Wenn Sie Fragen oder Anmerkungen haben, können Sie mich gerne in den Kommentaren informieren!

• Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.

Code