Administrer størrelsen af skrifttyper ... med en skyder!
Side 1 af 2
Implementering af et moderne websted, og du skal være opmærksom ikke kun af grafik og indhold, men også af "tilgængelighed.
Er der nogen retningslinjer om W3C, kan du finde oversættelsen her .
Blandt andet er det også vigtigt at give dem, der besøger os, at være i stand til at zoome teksten til en bestemt side eller sektion.
Denne funktion ud over at være nydes af folk med synsproblemer kan blive flagskibet i vores arbejde, hvis de gennemføres på en kreativ måde.
Løsningen
Jeg troede, denne gang ved hjælp af jQuery UI skyderen komponent til at skabe vores fontsize-omskiftere, der gør brug naturligvis også et par linjer af CSS.
For at give en idé om det endelige resultat, vi ønsker at opnå et kig på billedet nedenfor:
Den nødvendige
Her er et 'billede af en simpel mappestruktur Eksempel:
jQuery og jQuery UI
Vi du først vil hente den nyeste version af jQuery fra her (1.6.1 i skrivende stund)
Det næste skridt er at hente jQuery UI , og især skyderen komponent, de samme trin som vi beskrev efter her, for ProgressBar.
Den index.html
Der er så en simpel HTML-struktur, som vi kalder en side bare 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 compagnie-awama.com og 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 compagnie-awama.com og 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 adipiscing Elit.
Quisque sem Risus, own CONGU mest værdig own, pharetra i krukker.
I HAC dictumst habitare publikum.
</ Div>
</ Body>
</ HTML>
Den side indeholder alle de nødvendige filer, css og js filer, vi har brug for. Inde i kroppen tag vi bare definere en div med id = fontLabels inde med fire div, der skal indeholde "A" prøve med en anden font-size.
Lige under definerer vi en beholder (div id = "sliderCont") vi er nødt til at sætte os selv i midten af siden, og inden for en div med id = "slider", hvor vi vil bygge med jQuery UI skyder sig selv.
Jeg har tilføjet teksten container med id = "TextContent" på, som vi vil handle for at øge / formindske skriftstørrelsen.
 |
CSS (Kursus)
Web Design og tilgængelighed i henhold til W3C CSS og XHTML. Fra 29 €. |
 |
HTML (Kursus)
Det markup sprog til nettet fra 29 €. |
 |
Javascript (Kursus)
Komplet guide til klient-side scripting. Fra 39 €. |