JavaScript

Didaktikk

Last ned

Sponsede Lenker

Administrere størrelsen av skriftene ... med en skyveknapp!

Hjem > JavaScript > Artikler > Managing skriftstørrelsen ... med en skyveknapp!

Artikkel skrevet av Riccardo Brambilla
Side 1 av 2

Implementering av et moderne nettsted og du bør være klar, ikke bare av grafikk og innhold, men også av "tilgjengelighet.

Er det noen retningslinjer om W3C, finner du oversettelse her .

Blant annet er det også viktig å la de som besøker oss å kunne zoome teksten på en bestemt side eller seksjonen.

Denne funksjonen i tillegg til å nytes av mennesker med synsproblemer kan bli flaggskipet i vårt arbeid hvis implementert på en kreativ måte.

Løsningen

Jeg trodde denne gangen ved hjelp av jQuery UI glidebryteren komponent for å lage vår skrift-omformerenheter, gjøre bruk selvsagt også et par linjer med CSS.

For å gi et inntrykk av det endelige resultatet vi ønsker å oppnå en titt på bildet nedenfor:

De nødvendige

Her er en "bilde av en enkel mappestruktur Eksempel:

jQuery og jQuery Ui

Vi først vil laste ned siste versjon av jQuery fra her (1.6.1 på den i skrivende stund)

Det neste trinnet er å laste ned jQuery UI , og i særdeleshet glidebryteren komponent, etter samme fremgangsmåte som vi beskrev her for ProgressBar.

Den index.html

Det er da en enkel HTML-struktur, som vi kaller en side bare index.html






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









 <html>







 <head>



  



 Sliders <title> jQuery Ui christiane-lecomte.com og 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 christiane-lecomte.com og 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 verdige eget, pharetra i krukker.

 

    



 I HAC dictumst habitare publikum.



  



 </ Div>







 </ BODY>







 </ HTML>

Siden inneholder alle de nødvendige filene, css og js filene vi trenger. Inne i body-koden bare vi definerer en div med id = fontLabels inne med fire div som skal inneholde "A" prøve med en annen font-size.

Like nedenfor vi definerer en beholder (div id = "sliderCont") må vi sette oss i midten av siden og innenfor en div med id = "glidebryteren" hvor vi skal bygge med jQuery UI glidebryteren selv.

Jeg har lagt teksten container med id = "TextContent" som vi vil handle for å øke / minske skriftstørrelsen.

I samme kategori ...

E-læring

	CSS (Course) Web Design og tilgjengelighet i henhold til W3C CSS og XHTML. Starter fra 29 €.
	HTML (Course) Kodespråket for Web fra 29 €.
	Javascript (Course) Komplett guide til klient-side scripting. Fra € 39.

Sponsede Lenker