JavaScript

Didaktika

Ke stažení

Sponzorované odkazy

Správa velikost písma ... s jezdcem!

Hlavní stránka > JavaScript > Články > Řízení velikost písma ... s jezdcem!

Článek napsal Riccardo Brambilla
Strana 1 z 2

Realizace moderního webu, a vy byste měli být vědomi nejen grafickou a obsahovou, ale i "dostupnost.

Existují nějaké pokyny týkající se W3C, najdete překlad zde .

Mimo jiné je také důležité pro ty, kteří nás navštíví, aby mohli zoom textu konkrétní stránka nebo oddíl.

Tato funkce kromě toho, že se těší osoby se zrakovým problémy se mohou stát vlajkovou lodí naší práce, pokud provádí tvůrčím způsobem.

Řešení

Myslel jsem, že tentokrát pomocí jQuery UI jezdec komponenty k vytvoření našeho fontSize, přepínače, využívající samozřejmě také několik řádků CSS.

Chcete-li poskytnout představu o konečném výsledku chceme dosáhnout podívat na následujícím obrázku:

Požadované

Zde je "obraz jednoduchý příklad strukturu složek:

jQuery a jQuery UI

Jsme nejprve stáhnout nejnovější verzi jQuery od zde (1.6.1 v době psaní)

Dalším krokem je stáhnout jQuery UI , a zejména na jezdce složky, po stejné kroky, které jsme popsali zde pro ProgressBar.

Index.html

Tam je pak jednoduché HTML struktury, kterou nazýváme stránky jen 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 bradleyshamburgers.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 bradleyshamburgers.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 CONGU hodné eget, pharetra ve sklenicích.

 

    



 V HAC dictumst publikum habitare.



  



 </ Div>







 </ Body>







 </ Html>

Stránka obsahuje všechny potřebné soubory, CSS a JS soubory, které potřebujeme. Uvnitř tagu body jsme jen definovat div s id = fontLabels uvnitř se čtyřmi div, který bude obsahovat "A" vzorek s různými font-size.

Těsně pod definujeme kontejner (div id = "sliderCont"), musíme se vžít do středu stránky a do div s id = "slider", ve kterém budeme stavět s jQuery UI jezdec sám.

Přidal jsem text kontejner s id = "TextContent", na které bude pracovat na zvýšení / snížení velikosti písma.

Ve stejné kategorii ...

E-Learning

	CSS (kurz) Web Design a přístupnosti podle W3C CSS a XHTML. Od 29 €.
	HTML (kurz) Značkovací jazyk pro web od 29 €.
	JavaScript (kurz) Kompletní průvodce pro skriptování na straně klienta. Od 39 €.

Sponzorované odkazy