..


Linki sponsorowane

Zarządzanie rozmiar czcionki ... z suwakiem!

Artykuł napisany przez Riccardo Brambilla
Strona 1 z 2

Wdrożenie nowoczesnej witryny i powinni być świadomi nie tylko grafiki i treści, ale także "dostępność.

Czy istnieją jakieś wytyczne co ​​do W3C, można znaleźć tłumaczenie tutaj .

Między innymi ważne jest również, aby umożliwić tym, którzy odwiedzają nas aby móc powiększać tekst danej strony lub sekcji.

Funkcja ta oprócz tego, że korzystają ludzie z zaburzenia widzenia może stać się wizytówką naszej pracy, jeśli realizowane w sposób kreatywny.

Rozwiązanie

Myślałem, że tym razem przy użyciu jQuery UI suwak składnik do tworzenia naszych fontSize-przełączniki, wykorzystując też oczywiście kilka linijek CSS.

Aby dać wyobrażenie o końcowym wyniku chcemy osiągnąć wygląd na obrazku poniżej:

Nasze suwak

Wymagane

Oto "obraz prosty przykład strukturę folderów:

struktury folderów

jQuery i jQuery UI

Pobieramy najpierw najnowszą wersję jQuery od tutaj (1.6.1 w momencie pisania)

Kolejnym krokiem jest pobranie jQuery UI , w szczególności komponent suwaka, wykonując te same operacje, które opisaliśmy tutaj na progressbar.

Index.html

Jest to prosty HTML struktury, które nazywamy strony tylko 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 decoster-immobilier.com i 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 decoster-immobilier.com i 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.

 

    



 Sem Quisque Risus, eget CONGU najbardziej godne eget, pharetra w słoikach.

 

    



 W HAC habitare publiczności dictumst.



  



 </ Div>







 </ Body>







 </ Html>

Strona zawiera wszystkie niezbędne pliki, css i js, czego potrzebujemy. Wewnątrz znacznika body po prostu zdefiniować div id = fontLabels wewnątrz cztery div, który będzie zawierał "A" próbki z różnych font-size.

Tuż poniżej możemy zdefiniować pojemnika (div id = "sliderCont"), musimy postawić się w środku strony i w div id = "slider", w którym będziemy budować z jQuery UI suwak się.

I dodaje pojemnika tekst z id = "TextContent", na którym będziemy działać, aby zwiększyć / zmniejszyć rozmiar czcionki.

W tej samej kategorii ...
E-Learning
CSS (Kurs) CSS (Kurs)
Web Design i dostępności zgodnie z W3C CSS i XHTML. Począwszy od 29 €.
HTML (Kurs) HTML (Kurs)
Język znaczników dla sieci od 29 €.
Javascript (Kurs) Javascript (Kurs)
Kompletny przewodnik po stronie klienta skryptów. Od 39 €.
Linki sponsorowane