Создание полосы вкладок на основе HTML с помощью jQuery UI
Дино Эспозито (Dino Esposito) | 13 ноября 2009 года Создание сложных и мощных пользовательских веб-интерфейсов никогда не было простой задачей и, вероятно, никогда не будет. Сложный пользовательский веб-интерфейс требует достаточно много работы над основным HTML-кодом для компоновки необходимой графики и достаточно связующего кода JavaScript, чтобы заставить его работать так, как нужно. Как разработчик, вы отвечаете и за макет, и за код, связывающий пользовательский интерфейс в одно целое. Что еще более важно, вы вынуждены использовать инструменты, которые были в ходу за несколько лет до революции ASP.NET. Технология ASP.NET была революционной, так как она перенесла разработчиков в мир серверного программирования, в котором клиентские функции генерируются особыми компонентами со скрытой структурой — серверными элементами управления. Наступление эпохи AJAX в корне изменило положение вещей, так как разработчики снова поняли важность выполнения работы на стороне клиента через непосредственный контакт с HTML и JavaScript. В этой статье я рассмотрю некоторые возможности специальной библиотеки, которые выводят программирование на стороне клиента на новый уровень. Это библиотека jQuery UI, которая является коллекцией мини-приложений и эффектов, составляющих популярный набор возможностей, предлагаемых классической библиотекой jQuery, с особым уклоном в область создания пользовательских интерфейсов. В этой статье я особо рассмотрю создание и оформление вкладок. Значение организации доступа к DOM Когда вы думаете о клиентском программировании, вы обычно предполагаете, что любой код будет работать быстрее, выглядеть плавно и не создавать мерцания. Все это так, но существует другой, не менее важный аспект, который необходимо учесть. Иногда клиентский код в решениях AJAX ограничен загрузкой некоего предварительно форматированного HTML-контента, который присоединен к элементу DOM посредством свойства Лучшее основание для использования jQuery UI — это возможность определить шаблон в соответствии с известными правилами, а затем вызвать функцию jQuery UI для данного поддерева DOM, когда страница узла загружена или когда она действительно нужна. Откуда ни возьмись, каким-то мистическим образом оживает другой статический фрагмент HTML и начинает реагировать на события мыши. Более того, тот же фрагмент HTML оформлен в новом стиле, что является результатом прекрасной поддержки CSS, предлагаемой библиотекой jQuery UI. Библиотеку jQuery UI можно бесплатно загрузить с сайта jqueryui.com. Библиотека обладает модульной структурой. При обращении к сайту вы можете собрать собственный пакет, комбинируя модули, которые вам понадобятся. Также можно включать на свои страницы ссылки на несколько предварительно собранных версий, размещенных в сети доставки контента (CDN) Google. Для элементов управления в библиотеке jQuery UI необходима библиотека стилей. При загрузке пакета выбирается тема по умолчанию, которую можно легко изменить на любую другую на ваш вкус. В контексте приложения ASP.NET MVC для хранения файлов CSS необходимо создать папку jq-ui-Themes в папке Content. Файлы скриптов хранятся в папке Scripts\jQueryUI, как показано на рис. 1. Для библиотеки jQuery UI требуется классическая библиотека jQuery. Последняя версия библиотеки jQuery UI — 1.7.2; эта версия связана с версией jQuery 1.3.2.
Шаблон для вкладок Давайте посмотрим, что нужно для создания нескольких вкладок для веб-страницы с помощью jQuery UI. Для начала создайте структуру DOM, соответствующую стандартной панели вкладок jQuery UI. По умолчанию список вкладок принадлежит структуре, созданной элементом DIV, который содержит неупорядоченный список (UL). Вот минимальная необходимая разметка:
Чтобы преобразовать эту структуру в динамический объект контейнера вкладок JavaScript, необходима ссылка на корневой элемент через jQuery, для которой вызывается функция
На рис. 2 показан результат. Не очень много, но достаточно, чтобы поверить, что что-то происходит.
Функцию
Можно добавить одну или несколько вкладок динамически или расширить начальный HTML-шаблон и задать группу готовых вкладок. Вот код, необходимый для динамического создания вкладки:
URL-адрес может указывать на ресурс, локальный для приложения или для предварительно скрытого элемента DIV на странице. Однако вкладку нельзя использовать как IFRAME, т. е. нельзя загрузить с внешнего сайта. Более того, при нажатии любой абсолютной ссылки на вкладке обновится не вкладка, а браузер. Указатель на элемент DIV на странице задается с помощью знака #, в виде #divID. При указании на URL-адрес вне страницы, в заголовке вкладки временно отображается сообщение “loading …”, так как AJAX загружает разметку для вставки. С помощью приведенных в таблице 1 параметров AjaxOptions можно настроить механику загрузки. На рис. 3 показаны текущие результаты.
Подобным образом можно удалить существующую вкладку и уничтожить контейнер целиком. Вот необходимый код; удаляемая вкладка определяется по индексу:
Построение реалистичного контейнера вкладок Слишком много кода для нескольких базовых задач. Теперь давайте рассмотрим более эффективные способы использования функции вкладки. Первое, что нужно продумать — как определить контент вкладок. Вкладка может указывать на общедоступный URL-адрес или на раздел текущего документа. Если вкладка указывает на общедоступный URL-адрес, контент загружается в фоновом режиме, а затем вставляется на страницу. Для загрузки динамического контента из Интернета используется инфраструктура AJAX или классическая библиотека jQuery. Часто в качестве альтернативы для контейнера вкладок задается относительно статичная структура, в которой каждая вкладка указывает на дочерний блок корневого элемента DIV, который является центром контейнера вкладок. В следующей разметке показана статическая схема для контейнера вкладок:
Каждая отображаемая вкладка представлена элементом LI, который содержит дочерний элемент привязки. Вот универсальный шаблон, определенный в исходном коде библиотеки:
При нажатии на вкладку срабатывает URL-адрес в привязке и выполняется переход внутри страницы, если используется URL-адрес со знаком #. Весь контент, который должен отображаться при выборе соответствующей вкладки (если он не загружается динамически с URL-адреса), должен быть размещен как встроенная разметка. Это как минимум приводит к проблемам с удобочитаемостью и поддержкой кода. Однако в ASP.NET MVC эту проблему можно обойти с помощью вспомогательного метода HTML
Вспомогательный метод Если планируется использовать контейнер вкладок как меню для всей страницы, то обычно нужно, чтобы полоса вкладок инициализировалась при загрузке страницы. Идеальным способом для выполнения этого действия в контексте jQuery является функция
Как видите, для инициализации функции
Параметры для контейнера вкладок Как вы видели, функция tabs настраивает контейнер. Эта функция имеет довольно гибкую сигнатуру. Например, ей можно передать объект параметров, как было показано ранее. Параметры, передаваемые при запуске, заменяют основные и стандартные параметры, неявно определенные библиотекой. В таблице 1 показаны некоторые значения по умолчанию и параметры, которые можно настроить при запуске.
Отправка команд в контейнер вкладок Кроме объекта параметров, метод $(tabElement).tabs(команда, параметры) Команда — это предопределенное имя, распознаваемое компонентом. Некоторые команды не имеют параметров, а некоторые принимают несколько параметров. В таблице 2 показано несколько поддерживаемых команд.
События вкладки Компонент, который запускает несколько событий для основных ситуаций, которые могут встретиться при работе. Например, событие происходит при выборе, добавлении или удалении вкладки. Более того, событие запускается при отображении, включении, отключении или загрузке вкладки. В таблице 3 перечислены поддерживаемые события:
Из параметра Таблица 4: Данные, доступные для обработчиков событий.
Работа с выбором вкладки Как правило, пользователь выбирает вкладку в контейнере щелчком или, скажем, наводя курсор мыши на выбираемую вкладку. Тем не менее, полезно иметь возможность выбрать вкладку программно. Команда
Предыдущий код выбирает третью вкладку (если она существует). Индекс, естественно, с нулевым основанием. Иногда даже более полезно иметь возможность извлечь индекс текущей выбранной вкладки, как показано ниже:
В этом случае также вызывается команда Еще одной интересной возможностью, имеющей отношение к выбору, является запрет переключения на другую вкладку, если условия на текущей вкладке не позволяют это сделать. Все, что нужно сделать для запрета изменения выбора — обработать событие Загрузка контента через AJAX При планировании полосы вкладок обычно необходимо разбить некий контент пользовательского интерфейса на несколько более удобных частей. Вся разметка загружается со страницей и собирается в модель DOM. Это означает, что чаще всего контент вкладок уже известен при их отображении. В этой связи можно улучшить взаимодействие с пользователем, скрыв несколько вкладок и отображая их при необходимости; однако это вряд ли может улучшить производительность. С другой стороны, использование загрузчика AJAX гарантирует, что разметка будет загружаться и увеличивать размер DOM только при определенных требованиях. Контент может загружаться и отображаться автоматически, если в качестве URL-адреса новой вкладки задать URL-адрес из того же домена. Метод
В качестве альтернативы вы можете управлять этим процессом самостоятельно и использовать API jQuery AJAX для установки подключения и захвата данных, а затем использовать API DOM для их присоединения к ранее пустой вкладке. Выводы Сегодня вкладки стали довольно обычным компонентом веб-интерфейса. Чаще всего вкладки кодируются при загрузке сегментов страницы и их присоединении к событиям мыши. При нажатии на определенную ссылку отображается связанный с ней контент. С точки зрения браузера вся работа выполняется при первой загрузке страницы. После этого происходит только изменение нескольких атрибутов видимости. Библиотека jQuery UI позволяет собрать полосу вкладок из нескольких тегов DIV и элементов LI, которые уже могли присутствовать на странице. Это похоже на процесс определения для элементов такого стиля, чтобы они выглядели как полоса вкладок, за исключением того, что стиль также включает некое специальное поведение. Для экономии памяти вкладками также можно управлять динамически. Однако для меня простота и эффективность настройки остается наиболее привлекательной характеристикой. |