Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11642
Последний выпуск: 19.06.2015

Основы 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 еще красивей и интерактивней.

Оставить комментарий

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог