Het beheer van de grootte van de lettertypes ... met een slider!
Pagina 1 van 2
Implementatie van een moderne site en u moet zich bewust zijn, niet alleen van de graphics en inhoud, maar ook van 'toegankelijkheid.
Zijn er richtlijnen over de W3C, vindt u de vertaling hier .
Onder andere is het ook belangrijk om mensen die ons bezoeken om te kunnen de tekst van een bepaalde pagina of sectie zoom.
Deze functie naast het feit dat genoten door mensen met een visuele problemen kunnen het vlaggenschip van ons werk worden indien toegepast op een creatieve manier.
De oplossing
Ik dacht dat dit keer met behulp van de jQuery UI component Slider naar onze fontSize-switchers maken, gebruik makend natuurlijk ook een paar regels CSS.
Om een idee te geven van het eindresultaat willen we een kijkje te bereiken de afbeelding hieronder:
De vereiste
Hier is een 'beeld van een eenvoudige mappenstructuur Voorbeeld:
jQuery en jQuery Ui
We downloaden eerst de laatste versie van jQuery vanaf hier (1.6.1 op het moment van schrijven)
De volgende stap is het downloaden van jQuery UI , en met name de component Slider, volgens dezelfde stappen die we beschreven hier voor de voortgangsbalk.
De index.html
Er is dan een eenvoudige HTML-structuur, die noemen we een pagina net 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 decoup-og-31.com en 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 decoup-og-31.com en 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, eget CONGU meest waardige eget, pharetra in potten.
In hac dictumst habitare publiek.
</ DIV>
</ Body>
</ Html>
De pagina bevat alle benodigde bestanden, css en js bestanden die we nodig hebben. Binnen in de body tag we net definiëren van een div met id = fontLabels binnen met vier Div, dat de "A" sample bevat met een ander font-size.
Net onder definiëren we een container (div id = "sliderCont") moeten wij ons in het midden van de pagina en binnen een div met id = "slider", waarin we bouwen met jQuery UI slider zelf.
Ik voegde de tekst container met id = "TextContent" waarop we zullen handelen te verhogen / verlagen van de lettergrootte.
 |
CSS (Cursus)
Web Design en toegankelijkheid volgens de W3C CSS en XHTML. Vanaf 29 €. |
 |
HTML (Cursus)
De opmaaktaal voor het web vanaf 29 €. |
 |
Javascript (Cursus)
Complete gids voor client-side scripting. Van 39 €. |