—»     —»   Новые возможности пользовательского интерфейса jQuery версии 1.8
  Раздел: Библиотеки скриптов, Виджеты   Комментариев: 1  

Новые возможности пользовательского интерфейса jQuery версии 1.8



Финальная версия пользовательского интерфейса jQuery версии 1.8 только-только появилась. Мы постараемся охватить все новые свойства и показать вам некоторые примеры новых виджетов.
Помимо сотен исправленных багов и мелких улучшений, новая версия включает в себя 5 новых плагинов и 1 новый эффект.

Какие нововведения в обновленной версии?

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

Для того чтобы начать прямо сейчас, ознакомьтесь с Widget-Factory и с css-платформой пользовательского интерфейса jQuery.

Также не стоит забывать про ThemeRoller – Bookmarklet для разработчиков от Firefox. С помощью этого приложения, вы сможете встроить ThemeRoller в любую страницу в Веб. Для того чтобы установить его, просто перетащите ссылку в панель управления Firefox (или попробуйте просто кликнуть по нему!).

Инструмент для позиционирования

С помощью этой утилиты вы можете размещать любой элемент относительно другого, или даже размещать его относительно всего окна или курсора мыши. Как было сказано разработчиками: «Пиши меньше – делай больше!», этому как раз соответствует то, что вы можете выбирать элемент на ваше усмотрение и редактировать параметр – относительно чего он должен позиционироваться. И все!

Здесь вы можете ознакомиться с официальной документацией.

Вы также можете посмотреть два предоставленных демо-файла.

- Инструмент для позиционирования – демо №1:

Ссылка на демо

Новые возможности пользовательского интерфейса jQuery версии 1.8

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

Просто тащите курсор мыши вокруг основного оранжевого элемента, и вы увидите процесс определения столкновений в действии!

- Инструмент для позиционирования – демо №2:

Ссылка на демо

Новые возможности пользовательского интерфейса jQuery версии 1.8

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

Виджет кнопки

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

Вы можете воспользоваться им прямо сейчас посредством диалогового окна или форм.

Здесь вы можете ознакомиться с официальной документацией.

Здесь также предоставлены 6 разных демо. Два из них мы представим вам прямо сейчас:

- Виджет кнопки – демо №1:

Здесь вы можете ознакомиться с демо.

Новые возможности пользовательского интерфейса jQuery версии 1.8

Вы можете использовать любую верстку для создания кнопок: Простой элемент кнопки, элемент формы ввода с тэгом подтверждения или анкора.

$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });

- Виджет кнопки – демо №2:

Здесь вы можете ознакомиться с демо.

Новые возможности пользовательского интерфейса jQuery версии 1.8

В этом демо вы сможете видеть (правда, не функционирующую) панель медиа-плеера, которая оснащена всеми типа кнопок, которые вы сможете делать с помощью этого нового виджета. Кнопки с иконками, чекбоксы и радиокнопки.

Не забудьте ознакомиться с исходником. Код достаточно легок.

Виджет автозаполнения

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

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

Также есть много различных демо на странице с официальной документацией. Вы можете ознакомиться с ними здесь: Официальная документация по автозаполнению. И опять же – представляем вам два демо-файла:

- Функция автозаполнения – демо №1:

Здесь вы можете ознакомиться с демо.

Новые возможности пользовательского интерфейса jQuery версии 1.8

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

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
$("#tags").autocomplete({
    source: availableTags
});

- Функция автозаполнения – демо №2:

Здесь вы можете ознакомиться с демо.

Новые возможности пользовательского интерфейса jQuery версии 1.8

В этом демо, источником данных является удаленный JSONP. В данном случае это: веб-сервис geonames.org. Как только вы введете название города, вам будет предложено много дополнительной информации.

Информация также может быть доступна для обратной связи – данные будут отображены в поле с результатами под полем для ввода текста.

Ознакомьтесь с полным списком изменений

jQuery UI 1.8 – Последний список изменений

Новые возможности пользовательского интерфейса jQuery версии 1.8

Кликните по ссылке сверху для того чтобы ознакомиться с полным списком изменений между jQuery UI 1.7.2 и jQuery UI 1.8.

Скачиваем jQuery UI 1.8

Новые возможности пользовательского интерфейса jQuery версии 1.8

Конечно же, и в этот раз у вас есть несколько вариантов получения jQuery UI.

- Полная комплектация:

С начальным паком UI 1.8 вы получите все компоненты и стандартные темы оформления. Версия также оптимизирована для руководства по инструкции для новичков, на случай, если вы только знакомитесь со всем этим.

- Полная сборка для разработчиков:

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

- Полный комплект тем:

С jQuery UI 1.8 Themes Pack вы получите 21 тему для галереи ThemeRoller. ВЫ можете выбрать и воспользоваться одной из них, или же взять одну для того, чтобы модифицировать ее по своему вкусу. Например, вы можете использовать ее с bookmarklet.

- Закачка по индивидуальным требованиям:

Если вы точно знаете, что вам нужно, то вы можете отправиться в jQuery UI 1.8 Download Builder чтобы собственноручно определить, что вам требуется от сборки и скачать уже подготовленный комплект в zip-архиве. Конечно, тут тоже все зависит от плагинов, поэтому вам не стоит беспокоиться по этому поводу.

- Другие источники закачки:

Теперь jQuery UI 1.8 также доступен на странице API с Ajax-библиотеками в Google. Как и всегда, вы можете пользоваться ими прямо в своих скриптах на стороне сервера и не беспокоить собственный.

* Уменьшенная версия
* Полная версия с комментариями
* Всегда последняя версия приложения

Конечно же, вы также можете отправиться на GitHub и скачать последнюю версию там.

В завершение + несколько ссылок

Если вы уже готовы использовать jQuery UI 1.8, убедитесь, что вы используете его с последней версией jQuery (1.4 и выше). Ведь только тогда вы сможете получить максимальные возможности.

Ядро jQuery UI теперь меньше на 71%. Такая оптимизация была достигнута за счет того, что модулированные компоненты теперь не включают себя еще и виджет мыши.

Новый плагин мыши уменьшает jQuery UI на 14%. Этот плагин не новый, но теперь он представляет собой отдельный самостоятельный файл, хотя раньше он входил в ядро.

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

Дополнительные ссылки:

* Форум разработчиков jQuery UI
* Полный список изменений
* Баг-трэкер jQuery UI
* Дизайн jQuery UI & Wiki-планировка
* ThemeRoller Bookmarklet
* Центр поддержки

Чего же нам ждать от jQuery UI 1.9? Наша команда уже в нетерпении. Мы хотим выслушать ваши предположения по поводу новой версии в комментариях к этой статье.

Удачных вам проектов!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, скрипты
Опубликовал Mysterious Master   Прочитано (раз): 6887   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 февраля 2012 @ 00:06
Написал: Sana2020 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
И в правду устранены множество багов,появились новые возможности,и есть аж 5 новых плагинов!нету слов просто замечательное приложение!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930