Основы jQuery UI
Дата: 25 сентября 2009 года
jQuery UI – виджет и интерактивная библиотека, созданная на основе библиотеки jQuery JavaScript. Позволяет создавать web-приложения с прекрасным пользовательским интерфейсом.
Загрузить необходимые для работы компоненты можно здесь
На странице загрузки Вы можете выбрать необходимые компоненты (виджеты, эффекты), тему (оформление) и версию библиотеки. Для начал оставляем установки по умолчанию. В дальнейшем можете удалять, компоненты, которые не будут использоваться в конкретном проекте или вообще не будут использоваться. Вообщем, нажимаем download, скачиваем архив, распаковываем и получаем такое содержимое:
/css/ /development-bundle/ /js/ index.html
Файл index.html содержит примеры вывода гармошки (accordion), закладок (tabs), диалога, слайдера и прочих компонентов. Его можно сразу запустить и посмотреть на все эти прелести.
Чтобы с нуля создать страничку с каким-либо компонентом jquery-ui необходимо подключить два файла библиотек jquery и jquery-ui и один файл со стилями:
<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css"
rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
И далее, например, для вывода компонента datepicker достаточно в теле html-документа (между тегами <body> </body>) расположить блок <div>, определить ему какой-нибудь id <div id=»datepicker»></div>
И затем в скрипте написать такую функцию, которая в блоке div с указанным id разместит datepicker.
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({
inline: true
});
});</script>
Или, например, слайдер можно вывести так:
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
Вообщем, достаточно просто можно отображать все необходимые компоненты.
В папке development-bundle есть документация и, самое интересное – папка demos с демонстрациями. Собственно, всего этого достаточно чтобы начать работать с jQuery-UI и делать web еще красивей и интерактивней.