..


Sponsoroidut linkit

Hallitse koko kirjasimia ... kanssa liukusäädintä!

Artikkelin kirjoittanut Riccardo Brambilla
Sivu 1 2

Toteuttaminen modernin sivuston ja teidän pitäisi olla tietoinen paitsi grafiikkaa ja sisältöä, mutta myös "saavutettavuus.

Onko ohjeita siitä, W3C, löydät käännöksen täältä .

Muun muassa se on myös tärkeää, jotta ne, jotka käyvät meidän pystyä zoomata tekstiä tietyn sivun tai osion.

Tämä ominaisuus sen lisäksi, että nauttivat, näkö ongelmia voi tulla lippulaiva toimi, jos toteutetaan luovasti.

Ratkaisu

Ajattelin tällä kertaa käyttäen jQuery UI liukusäädintä komponentti luoda meidän fonttikoko-vaihtajat, hyödyntäen myös tietenkin muutaman rivin CSS.

Antaa ajatuksen lopputuloksen haluamme saavuttaa katsoa kuvan alla:

Meidän liukusäädintä

Tarvitaan

Tässä on "kuva yksinkertainen kansiorakenne Esimerkki:

kansiorakenne

jQuery ja jQuery UI

Me hakea ensin uusimman version jQuery päässä täältä (1.6.1 aikaan kirjallisesti)

Seuraava askel on ladata jQuery UI , ja erityisesti liukusäädintä komponentti jälkeen samat vaiheet, että me kuvattu täällä varten ProgressBar.

Index.html

Sitten on yksinkertainen HTML rakennetta, jota kutsumme sivun vain 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 deliveriesfirst.com ja 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 deliveriesfirst.com ja 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 arvokkaimpia eget, pharetra vuonna purkkeihin.

 

    



 Vuonna HAC dictumst Habitare yleisöä.



  



 </ Div>







 </ Body>







 </ HTML>

Sivu sisältää kaikki tarvittavat tiedostot, CSS ja JS tiedostot tarvitsemme. Sisällä body me vain määritellä div kanssa id = fontLabels sisältä neljä divisioonaa, joka sisältää "" näytteen eri fontin-kokoa.

Hieman alle me määrittelemme kontti (div id = "sliderCont") meidän täytyy laittaa itsemme keskellä sivua ja sisällä div kanssa id = "liukusäädin", jossa me rakennamme jQuery UI liukusäädintä itse.

Lisäsin tekstin astia id = "TextContent", joihin meidän tulee toimimaan lisätä / vähentää fonttikoon.

Samassa luokassa ...
E-Learning
CSS (kurssi) CSS (kurssi)
Web Design and Accessibility mukaan W3C CSS ja XHTML. Alkaen 29 €.
HTML (kurssi) HTML (kurssi)
Merkkauskieli Web alkaen 29 €.
Javascript (kurssi) Javascript (kurssi)
Täydellinen opas client-side scripting. Alkaen 39 €.
Sponsoroidut linkit