..


Sponzorované odkazy

Správa veľkosť písma ... s jazdcom!

Článok napísal Riccardo Brambilla
Strana 1 z 2

Realizácia moderného webu, a vy by ste mali byť vedomí nielen grafickú a obsahovú, ale aj "dostupnosť.

Existujú nejaké pokyny týkajúce sa W3C, nájdete preklad tu .

Okrem iného je tiež dôležité pre tých, ktorí nás navštívia, aby mohli zoom texte konkrétnej stránky alebo sekcie.

Táto funkcia okrem toho, že sa teší osoby so zrakovým problémy sa môžu stať vlajkovou loďou našej práce, ak vykonáva tvorivým spôsobom.

Riešenie

Myslel som, že tentoraz pomocou jQuery UI jazdec komponenty k vytvoreniu nášho fontSize, prepínače, využívajúce samozrejme tiež niekoľko riadkov CSS.

Ak chcete poskytnúť predstavu o konečnom výsledku chceme dosiahnuť pozrieť na nasledujúcom obrázku:

Náš jazdec

Požadované

Tu je "obraz jednoduchý príklad štruktúru priečinkov:

štruktúra zložiek

jQuery a jQuery UI

Sme najprv stiahnuť najnovšiu verziu jQuery od tu (1.6.1 v čase písania)

Ďalším krokom je stiahnuť jQuery UI , a najmä na jazdca zložky, po rovnakej kroky, ktoré sme popísali tu pre lište.

Index.html

Tam je potom jednoduché HTML štruktúry, ktorú nazývame stránky len index.html 






 <DOCTYPE Html veřejnosti! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









 <html>







 <head>



  



 Posuvníky <title> jQuery UI easthamptonfireco1.com a 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>



  



 Posuvníky <h3> jQuery UI easthamptonfireco1.com a 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 dolor sit amet, consectetur adipiscing Elit.

 

    



 Quisque sem risus, eget CONGO hodné eget, pharetra v pohároch.

 

    



 V HAC dictumst publikum habitare.



  



 </ Div>







 </ Body>







 </ Html>

Stránka obsahuje všetky potrebné súbory, CSS a JS súbory, ktoré potrebujeme. Vnútri tagu body sme len definovať div s id = fontLabels vnútri so štyrmi div, ktorý bude obsahovať "A" vzorka s rôznymi font-size.

Tesne pod definujeme kontajner (div id = "sliderCont"), musíme sa vžiť do stredu stránky a do div s id = "slider", v ktorom budeme stavať s jQuery UI jazdec sám.

Pridal som text kontajner s id = "TextContent", na ktoré bude pracovať na zvýšenie / zníženie veľkosti písma.

V rovnakej kategórii ...
E-Learning
CSS (kurz) CSS (kurz)
Web Design a prístupnosti podľa W3C CSS a XHTML. Od 29 €.
HTML (kurz) HTML (kurz)
Značkovací jazyk pre web od 29 €.
JavaScript (kurz) JavaScript (kurz)
Kompletný sprievodca pre skriptovanie na strane klienta. Od 39 €.
Sponzorované odkazy