..


Sponzorirani linkovi

Upravljanje veličine fontova ... s klizača!

Članak je napisao Riccardo Brambilla
Stranica 1 od 2

Provedba moderne stranice i trebate biti svjesni ne samo grafika i sadržaja, ali i 'pristupačnosti.

Ima li kakvih smjernica o W3C, možete pronaći prijevod ovdje .

Između ostalog to je također važno da omogući onima koji nas posjete biti u mogućnosti da biste povećali tekst određenoj stranici ili sekciji.

Ova značajka osim što uživaju ljudi s vizualnim problemi mogu postati vodeći našeg rada ako se provode na kreativan način.

Rješenje

Mislila sam da ovaj put koristeći jQuery UI komponente klizač za stvaranje naše veličinu slova-Switchers, čineći korištenje i, naravno, nekoliko redaka CSS.

Kako bi ideja konačnog rezultata želimo postići izgled na slici ispod:

Naš klizač

Traži

Ovdje je 'slika jednostavna strukturu mapa Primjer:

strukturu mapa

jQuery i jQuery Ui

Mi smo preuzeli prvi najnoviju verziju jQuery iz ovdje (1.6.1 u vrijeme pisanja)

Sljedeći korak je preuzimanje jQuery UI , a posebno klizač komponenta, slijedeći iste korake koje smo opisali ovdje za progressbar.

Index.html

Osim toga, postoji jednostavan HTML strukturu, što mi zovemo stranicu samo index.html 






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









 <html>







 <head>



  



 Klizači <title> jQuery Ui carlindesbruyerescorrezienne.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>



  



 Klizači <h3> jQuery Ui carlindesbruyerescorrezienne.com i font-size </ h3>



  

  



 <div id="fontLabels">



    



 <div id="normal"> </ div>



    



 <div id="big"> </ div>



    



 <div id="bigger"> </ div>



    



 <div id="biggest"> </ div>



  



 </ Div>



  

  



 <div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ div> </ div>



  



 <div id="textcontent">



    



 Lorem ipsum bol sjediti amet, consectetur adipiscing Elit.

 

    



 Quisque SEM risus, eget CONGU najviše dostojan eget, pharetra u staklenke.

 

    



 U HAC dictumst HABITARE publike.



  



 </ Div>







 </ Body>







 </ HTML>

Stranica uključuje sve potrebne datoteke, CSS i JS datoteke trebamo. Unutar tijela oznake smo upravo definirali div s id = fontLabels iznutra s četiri div koji će sadržavati "" uzorak drugi font-size.

Samo u nastavku ćemo definirati kontejner (div id = "sliderCont") moramo se staviti u sredini stranice i unutar div s id = "klizač" u kojem ćemo graditi s jQuery UI klizač sama.

Dodao sam tekst spremnik s id = "TextContent" na kojoj će djelovati na povećanje / smanjenje veličine fonta.

U istoj kategoriji ...
E-učenje
CSS (tečaj) CSS (tečaj)
Web dizajn i dostupnost u skladu s W3C CSS i XHTML. Počevši od 29 €.
HTML (tečaj) HTML (tečaj)
Označni jezik za web od 29 €.
Javascript (tečaj) Javascript (tečaj)
Kompletan vodič za client-side skriptiranje. Od 39 €.
Sponzorirani linkovi