..


Рекламные ссылки

Управление размером шрифта ... с ползунком!

Статья написана Риккардо Брамбилла
Страница 1 из 2

Реализация современный сайт, и вы должны знать не только графикой и содержание, но и "доступности.

Есть ли рекомендации о W3C, вы можете найти перевод здесь .

Среди прочего это также важно, чтобы позволить тем, кто посещает нас, чтобы иметь возможность для увеличения тексте конкретной страницы или раздела.

Эта функция в дополнение к тому, которыми пользуются люди с нарушениями зрения могут стать флагманом нашей работы, если осуществляется в творческом пути.

Решение

Я думал, что это время, используя JQuery слайдер компонент пользовательского интерфейса для создания нашего FontSize-коммутаторов, используя также, конечно, несколько строк CSS.

Чтобы дать представление о конечном результате мы хотим достичь выглядеть на изображении ниже:

Наши ползунок

Требуется

Вот "образ простого примера структуру папок:

Структура папок

JQuery и JQuery UI

Мы скачать первый последнюю версию JQuery от сюда (1.6.1 на момент написания статьи)

Следующим шагом будет скачать JQuery UI , и в частности ползунок компонент, следуя той же шаги, которые мы описали здесь для ProgressBar.

Index.html

Существует то простой HTML-структуру, которую мы называем странице, просто index.html 






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









 <html>







 <head>



  



 Слайдеры <title> JQuery UI cross-harmony.com и размер шрифта </ 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>



  



 Слайдеры <h3> JQuery UI cross-harmony.com и размер шрифта </ h3>



  

  



 <div id="fontLabels">



    



 <div id="normal"> </ P>



    



 <div id="big"> </ P>



    



 <div id="bigger"> </ P>



    



 <div id="biggest"> </ P>



  



 </ P>



  

  



 <div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ P> </ P>



  



 <div id="textcontent">



    



 Lorem Ipsum боль сидеть Амет, consectetur adipiscing элит.

 

    



 Quisque сем пзиз, eget CONGU самых достойных eget, pharetra в банках.

 

    



 В HAC аудитории dictumst Habitare.



  



 </ P>







 </ Body>







 </ Html>

Страница содержит все необходимые файлы, CSS и JS файлы нам нужны. Внутри корпуса теги мы просто определить дел с ID = fontLabels внутри с четырьмя дел, который будет содержать "" образца с различным размером шрифта.

Чуть ниже мы определяем контейнер (DIV ID = "sliderCont"), нужно поставить себя на середине страницы и в рамках дел с ID = "слайдер", в которой мы будем строить с JQuery UI ползунок себя.

Я добавил текст контейнер с ID = "TextContent", на котором мы будем действовать, чтобы увеличить / уменьшить размер шрифта.

В той же категории ...
E-Learning
CSS (курс) CSS (курс)
Веб-дизайн и доступность в соответствии с W3C CSS и XHTML. Начиная от 29 €.
HTML (курс) HTML (курс)
Язык разметки для веб от 29 €.
Javascript (курс) Javascript (курс)
Полное руководство для сценариев на стороне клиента. С 39 €.
Рекламные ссылки