Verwalten der Größe der Schriftarten ... mit einem Schieberegler!
Seite 1 von 2
Implementierung einer modernen Website, und Sie sollten sich bewusst sein, nicht nur von Grafiken und Inhalten, sondern auch von der Zugänglichkeit.
Gibt es Richtlinien über die W3C, können Sie die Übersetzung finden Sie hier .
Unter anderem ist es auch wichtig, damit diejenigen, die uns besuchen zu können, um den Text einer bestimmten Seite oder einen Abschnitt zoomen.
Diese Funktion abgesehen davon, dass Menschen mit Sehstörungen genossen werden kann das Flaggschiff unserer Arbeit geworden, wenn in einer kreativen Art und Weise umgesetzt.
Die Lösung
Ich dachte, diesmal mit dem jQuery UI Slider-Komponente, um unsere fontSize-Switcher zu erstellen, die Nutzung natürlich auch ein paar Zeilen CSS.
Um eine Vorstellung des Endergebnisses wir erreichen wollen, einen Blick das Bild unten:
Die erforderliche
Hier ist ein "Bild von einer einfachen Ordnerstruktur Beispiel:
jQuery und jQuery UI
Wir laden zuerst die neueste Version von jQuery von hier (1.6.1 zum Zeitpunkt des Schreibens)
Der nächste Schritt ist zum Download jQuery UI und insbesondere der Slider-Komponente, die gleichen Schritte, die wir beschrieben hier für die Progressbar.
Die index.html
Es ist dann eine einfache HTML-Struktur, die wir als eine Seite nur index.html
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
Sliders <title> jQuery UI cb-demolition.com und font-size </ title>
href = "css / style.css" <link rel="stylesheet" type="text/css" />
href = "css/ui-lightness/jquery-ui-1.8.13.custom.css" <link rel="stylesheet" type="text/css" />
src = "js/jquery.1.6.1.js" <script type="text/javascript"> </ script>
src = "js/jquery-ui-1.8.13.custom.min.js" <script type="text/javascript"> </ script>
src = "js / index.js" <script type="text/javascript"> </ script>
</ Head>
<body>
Sliders <h3> jQuery UI cb-demolition.com und font-size </ h3>
<div id="fontLabels">
<div id="normal"> A </ div>
<div id="big"> A </ div>
<div id="bigger"> A </ div>
<div id="biggest"> A </ div>
</ Div>
<div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ div> </ div>
<div id="textcontent">
Lorem ipsum dolor sit amet, consectetur bibendum sollicitudin.
Quisque sem risus, eget CONGU würdigsten eget, pharetra in Gläsern.
In hac dictumst HABITARE Publikum.
</ Div>
</ Body>
</ Html>
Die Seite enthält alle notwendigen Dateien, CSS und JavaScript Dateien die wir brauchen. Inside the body-Tag bestimmen Sie lediglich ein div mit id = Fontlabels innen mit vier div, dass die "A"-Probe mit einem anderen font-size enthalten wird.
Knapp unterhalb definieren wir einen Container (div id = "sliderCont") müssen wir uns in der Mitte der Seite und innerhalb einer div mit der id put = "Slider", in denen wir mit jQuery UI Schieberegler selbst bauen.
Ich habe den Text-Container mit id = "TextContent" auf die wir reagieren zu erhöhen / verringern Sie die Schriftgröße wird.
 |
CSS (Kurs)
Web Design und Barrierefreiheit gemäß W3C CSS und XHTML. Ab 29 €. |
 |
HTML (Kurs)
Die Markup-Sprache für das Web ab 29 €. |
 |
Javascript (Course)
Ein vollständiger Reiseführer von Client-Side-Scripting. Von 39 €. |