Gestire la dimensione dei font... con uno slider!
Pagina 1 di 2
Nell'implementazione di un sito moderno è necessario tenere conto non solo di grafica e contenuti ma anche dell' accessibilità.
Esistono delle linee guida del W3C a riguardo, potete trovarne la traduzione qui.
Tra le altre cose è importante anche permettere a chi ci visita di poter ingrandire il testo della pagina o di una particolare sezione.
Questa funzionalità oltre ad essere fruita da persone con problemi visivi potrà trasformarsi nel fiore all'occhiello del nostro lavoro se implementata in modo creativo.
La soluzione
Ho pensato questa volta di utilizzare il componente slider di jQuery Ui per creare il nostro fontSize-switcher, ovviamente avvalendoci anche di qualche riga di CSS.
Per rendere l'idea del risultato finale che vogliamo raggiungere date uno sguardo all'immagine che segue:
L'occorrente
Di seguito un' immagine della semplice struttura delle cartelle dell'esempio:
jQuery e jQuery Ui
Scarichiamo prima di tutto l'ultima versione di jQuery da qui ( la 1.6.1 al momento in cui scrivo )
Il passaggio successivo è scaricare jQuery Ui, ed in particolare il componente slider, seguendo gli stessi passi che avevamo descritto qui per la progressbar.
Il file index.html
Ci serve poi una semplice struttura HTML, una pagina che chiameremo semplicemente index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sliders jQuery Ui e font-size MrWebmaster.it</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.1.6.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<h3>Sliders jQuery Ui e font-size MrWebmaster.it</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, congue eget dignissim eget, pharetra a orci.
In hac habitasse platea dictumst.
</div>
</body>
</html>
La pagina include tutti i files necessari, i css ed i js che ci servono. All'interno del tag body ci basta definire un div con id=fontLabels con all'interno i quattro div che conterranno le "A" di esempio con font-size diversi.
Appena sotto definiamo un contenitore ( div con id="sliderCont" ) che ci serve per metterci al centro della pagina ed all'interno un div con id="slider" dentro il quale costruiremo grazie a jQuery Ui lo slider vero e proprio.
Ho aggiunto poi il contenitore di testo con id="textcontent" sul quale agiremo per aumentarne/diminuirne il font-size.
