Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Первый взгляд на jQuery UI

September 17th, 2007 | Category: Javascript, jQuery, Дизайн | Автор: Александр

jQuery logoКак я уже писал на прошлой неделе, команда jQuery выпустила jQuery UI - набор из функций для создания интерфейса пользователя для вэба. Я ждал день релиза, и в воскресение вечером сел за компьютер, чтобы протестировать все новые функции. Функций оказалось немало и результаты отличные. Очередной замечательный релиз.

Сегодня я покажу работу следующих элементов:

  • Аккордеон
  • Календарь
  • Диалог
  • Слайдер
  • Таблица с сортировкой
  • Табы

1) Аккордеон

Всё достаточно просто. Нужно сделать UL список, дать ему ID (например id="example") и вызвать:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $("#example").accordion();
  3. });

Тут исходник и документация.

2) Календарь

Ещё проще, чем аккордеон. Создаём input поле, даём ему id (например id="example") и:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $('#example').calendar({autoPopUp: 'focus'});
  3. });

Тут исходник и документация.

3) Диалоговое окно

Делаем DIV с id="example", пишем внутрь какое нибудь сообщение и можем навсегда забыть про alert():

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $("#example").dialog();
  3. });

Тут исходник и документация.

4) Слайдер

Для слайдера необходимо два DIV-a. Один для полоски по которой будет передвигаться слайдер, и другой DIV для самого слайдера. Запускаем слайдер следующей функцией:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $("#example").slider();
  3. });

Тут исходник и документация.

5) Таблица с сортировкой

Требуется всего лишь таблица с какими нибудь данными и вызов следующей функции:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
  3. });

Тут исходник и документация.

6) И напоследок табы.

Для табов необходим список UL и несколько DIV-в. В списке будут заголовки для табов, а в DIV-ах текст. Ну и как всегда джаваскрипт:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $("#example > ul").tabs();
  3. });

Исходник и документация.

Надеюсь команда jQuery на этом не остановится и продолжит работу над элементами UI. jQuery это замечательная библиотека, если бы не Prototype, то я бы писал свой джаваскрипт именно с её помощью. :)

del.icio.us Забобрить!

13 Comments so far

  1. Dumay September 17th, 2007 13:08

    ЗЫ в Prototype тоже есть такие штуки?…
    В EXT точно есть, так как скорей EXT именно интерфейс для пользователя нежели какието проверки и так далее :)

  2. Dumay September 17th, 2007 15:15

    кто хочет посомтреть галерею как на скрине она тут - http://dev.jquery.com/view/trunk/plugins/ui/apps/gallery_advanced/ :)

  3. Aleksandr September 17th, 2007 20:52

    Прикольная галерея :)

  4. Евгений September 20th, 2007 23:20

    Я сразу не обратил внимания на эту библиотеку, а когда покрутил немного, потаскал окошко, понял, что зря, очень полезная штука.

  5. Евгений October 1st, 2007 21:02

    Со слайдером беда, его можно утащить вправо дальше чем положено.

  6. Aleksandr October 1st, 2007 21:41

    На самом деле :)

  7. Юля November 24th, 2007 14:20

    А как поменнять цвет в табах?

  8. Aleksandr November 25th, 2007 10:08

    Юля,

    С помощью CSS. У .ui-tabs-nav a, .ui-tabs-nav a span надо поменять background.

  9. Юля December 5th, 2007 14:24

    А где найти CSS?

  10. Юля December 5th, 2007 15:03

    И как сделать так что бы при обновлении странички открывался именно тот таб на котором только что были сделаны обновления??? Очень Очень нужно. Помоги пожалуйста

  11. Anonymous December 6th, 2007 20:59

    в файрфоксе чет не работает половина

  12. Pyzik February 21st, 2008 16:19

    Да, совершленно согласен с предыдущим пользователем , не работает половина и в опере тоже!А идея очень хорошая спасибо, буду заходить!

  13. Связист June 3rd, 2008 11:04

    Очень полезная статья. Добавил RSS в свою ленту.

    Полагаю, для табов надо делать такой вариант CSS, чтобы при несрабатывании плугина меню всё же выглядело по человечески, например, вытянутое в строку.

    2 Dumay : галерея не открывается (404 Not found)

Leave a reply