Administrar la mida de les fonts ... amb un control lliscant!
Pàgina 1 de 2
Implementació d'un lloc modern i ha de tenir en compte no només dels gràfics i contingut, sinó també de «accessibilitat.
Hi ha algunes pautes sobre la W3C, es pot trobar la traducció aquí .
Entre altres coses, també és important per permetre que aquells que ens visiten per ser capaç d'ampliar el text d'una pàgina o secció.
Aquesta característica, a més de ser gaudit per persones amb problemes visuals poden arribar a ser el vaixell insígnia del nostre treball si s'apliquen d'una manera creativa.
La solució
Vaig pensar que aquesta vegada utilitzant el component d'interfície d'usuari lliscant jQuery per crear la nostra fontsize-switchers, fent ús també, per descomptat, unes poques línies de CSS.
Per donar una idea del resultat final que volem aconseguir un aspecte de la imatge de sota:
La necessària
Aquesta és una imatge "d'un exemple senzill l'estructura de carpetes:
jQuery UI i jQuery
Nosaltres la primera descàrrega la darrera versió de jQuery des aquí (1.6.1 en el moment d'escriure això)
El següent pas és descarregar jQuery UI , i en particular el component de control lliscant, seguint els mateixos passos que hem descrit aquí per a la barra de progrés.
El index.html
Hi ha, doncs, una estructura simple d'HTML, el que anomenem una pàgina index.html només
<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 centre-equestre-sarremas.com i font-size </ title>
href = "css / style.css" <link rel="stylesheet" type="text/css" />
href = "css/ui-lightness/jquery-ui-1.8.13.custom.css" type = "text / css" <link rel="stylesheet" />
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>
JQuery Sliders <h3> Ui centre-equestre-sarremas.com i 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.
Déu sem risus, Egética Egética CONGU més digne, pharetra en flascons.
En hac dictumst audiència viuré.
</ Div>
</ Body>
</ HTML>
La pàgina inclou tots els arxius necessaris, css i js que necessitem. A l'interior del cos de l'etiqueta que acabem de definir un div amb id = fontLabels interior amb quatre div que conté la mostra "A" amb una mida de font diferent.
Just a sota es defineix un contenidor (div id = "sliderCont") hem de posar-nos al centre de la pàgina i dins d'un div amb id = "slider" en el qual anem a construir amb el control lliscant jQuery UI si mateix.
He afegit el contenidor de text amb id = "TextContent" en la qual anem a actuar per augmentar / disminuir la mida de la font.
 |
CSS (Curs)
Disseny Web i d'accessibilitat d'acord amb W3C CSS i XHTML. A partir de 29 €. |
 |
HTML (del curs)
El llenguatge de marcat per a la web des de 29 €. |
 |
Javascript (Curs)
Guia completa de scripting del costat del client. A partir de 39 €. |