..


Link-uri sponsorizate

Administreaza dimensiunea fonturilor ... cu un slider!

Articol scris de Riccardo Brambilla
Pagina 1 din 2

Punerea în aplicare a unui site modern şi ar trebui să fie conştienţi nu numai de grafică şi de conţinut, dar, de asemenea, de "accesibilitate.

Există linii directoare cu privire la W3C, puteţi găsi traducerea aici .

Printre altele, este, de asemenea, important să se permită celor care ne viziteze pentru a putea mări textul unei anumite pagini sau secţiuni.

Această caracteristică, în afară de a fi bucurat de către persoanele cu probleme vizuale pot deveni nava amiral a muncii noastre dacă vor fi implementate într-un mod creativ.

Soluţia

M-am gândit de data aceasta folosind jQuery UI componenta cursorul pentru a crea noastre fontSize-switchere, făcând utiliza, de asemenea, desigur, cateva linii de CSS.

Pentru a da o idee despre rezultatul final dorim să realizăm o privire imaginea de mai jos:

Noastre glisorul

Necesare

Aici este o imagine "de un exemplu simplu structura de foldere:

dosarul structura

jQuery si jQuery Ui

Am prelua mai întâi cea mai recentă versiune de jQuery de la aici (1.6.1 în momentul de scris)

Următorul pas este de a descărca jQuery UI , şi, în special componenta de slider, urmând aceiaşi paşi pe care am descris aici pentru progressbar.

Index.html

Există apoi o structura simpla HTML, pe care o numim o pagină de doar index.html 






 <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"!>









 <html>







 <head>



  



 Glisoarele <title> jQuery Ui ecuries-du-fourneau.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" <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>



  



 Glisoarele <h3> jQuery ecuries-du-fourneau.com Ui ş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.

 

    



 Quisque sem risus, eget CONGU eget cel mai demn, pharetra în borcane.

 

    



 În audienţă habitare HAC dictumst.



  



 </ Div>







 </ BODY>







 </ HTML>

Pagina include toate fişierele necesare, CSS şi fişiere js avem nevoie. În interiorul tag-ul body le definim doar un div cu id = fontLabels interior cu patru div care va conţine "A" probă cu un alt font-size.

Doar de mai jos definim un container (div id = "sliderCont"), avem nevoie pentru a ne pune in mijlocul paginii şi într-un div cu id = "slider", în care vom construi cu cursorul jQuery UI în sine.

Am adaugat textul recipient cu id = "TextContent" pe care vom acţiona pentru a mări / micşora dimensiunea fontului.

În aceeaşi categorie ...
E-Learning
CSS (Curs) CSS (Curs)
Web Design şi accesibilitatea în conformitate cu W3C CSS si XHTML. Incepand de la 29 €.
HTML (Curs) HTML (Curs)
Limbajul de marcare pentru Web de la 29 €.
Javascript (Curs) Javascript (Curs)
Ghid complet pentru client-side scripting. De la 39 €.
Link-uri sponsorizate