Javascript

Didaktik

Ladda ner

Sponsrade länkar

Hantera storleken på typsnitt ... med ett reglage!

Hem > JavaScript > Artiklar > Managing teckenstorleken ... med ett reglage!

Artikel skriven av Riccardo Brambilla
Sidan 1 av 2

Genomförandet av en modern webbplats och du bör vara medveten inte bara grafik och innehåll utan också av "tillgänglighet.

Finns det några riktlinjer om W3C: s, kan du hitta översättningen här .

Bland annat är det också viktigt att låta dem som besöker oss för att kunna zooma in texten på en viss sida eller avsnitt.

Denna funktion förutom att njuta av människor med synproblem kan bli flaggskeppet i vårt arbete om de genomförs på ett kreativt sätt.

Lösningen

Jag trodde den här gången med hjälp av jQuery komponenten UI reglaget för att skapa vår fontSize-switchar, att använda sig naturligtvis också några rader av CSS.

För att ge en uppfattning om det slutliga resultatet vi vill uppnå en titt på bilden nedan:

Den erforderliga

Här är en "bilden av en enkel mappstruktur Exempel:

jQuery och jQuery UI

Vi första hämta den senaste versionen av jQuery från här (1.6.1 i skrivande stund)

Nästa steg är att ladda ner jQuery UI , och i synnerhet Slider-komponenten, efter samma steg som vi beskrev här för ProgressBar.

Den index.html

Det är då en enkel HTML-struktur, som vi kallar en sida bara index.html






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









 <html>







 <head>



  



 Sliders <title> jQuery UI dynastyhomeloan.com och 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>



  



 Sliders <h3> jQuery UI dynastyhomeloan.com och 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 mest förtjänta EGET, pharetra i burkar.

 

    



 I HAC dictumst Habitare publik.



  



 </ Div>







 </ Body>







 </ Html>

Sidan innehåller alla nödvändiga filer, CSS och JS-filer vi behöver. Inne i body-taggen definierar vi bara en div med id = fontLabels insidan med fyra div som ska innehålla "A" prov med en annan font-size.

Alldeles nedanför vi definierar en behållare (div id = "sliderCont") måste vi sätta oss i mitten av sidan och inom en div med id = "reglaget" där vi kommer att bygga med jQuery UI reglaget själv.

Jag lade till texten behållaren med id = "TextContent" som vi ska agera för att öka / minska teckenstorlek.

I samma kategori ...

E-Learning

	CSS (kurs) Webbdesign och tillgänglighet enligt W3C CSS och XHTML. Från 29 €.
	HTML (kurs) Det märkspråk för webben från 29 €.
	Javascript (Kurs) Komplett guide till klient-side-scripting. Från 39 €.

Sponsrade länkar