Дино Эспозито| 17 июня 2010 г.

Без кнопок графический интерфейс пользователя был бы совсем другим. При отображении нажимаемых и других кнопок на Интернет-страницах в браузере используется отрисовка по умолчанию. С помощью стилей CSS можно изменить вид, но не тип отрисованных кнопок. Это по-прежнему будут нажимаемые кнопки, флажки, переключатели и т. д.

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

Библиотека jQuery UI может очень пригодиться и при работе с кнопками. Фактически в версию 1.8 добавлена поддержка написания скриптов кнопок. Давайте подробнее рассмотрим этот вопрос.

Простые кнопки

В библиотеку jQuery UI 1.8 встроен новый виджет для выбора стиля и настройки любого типа кнопок для веб-страниц. Ниже указано все, что для этого нужно сделать:

$("#button1").button();

Идентификатор "button1" может иметь любой элемент, создающий HTML-кнопку или гиперактивный элемент, например, привязку. Далее следует список (неполный) HTML-кнопок, к которым можно с успехом применить предыдущий код.

<button id="btn1" type="submit"> OK </button> 
<input id="btn2" type="submit" value="Save" />  
<input id="btn3" type="reset" value="Reset" />  
<input id="btn4" type="button" value="Test" />  
<a id="btn5" href="#"> Click me </a>

Как видите, виджет кнопки можно применять к элементам <button> и классическим элементам кнопки и гиперссылкам <input>. В коде HTML элемент <input> кнопок может относиться к типу submit, reset, button; виджет кнопки jQuery UI полностью поддерживает все эти стили. Список дополняют специальные типы кнопок, например, переключатели и флажки. Соответственно, виджет поддерживает и следующие HTML-элементы:

<input id="btn2" type="checkbox" />  
<input id="btn3" type="radio" />

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

Каков же конечный эффект применения команды button() к соответствующему элементу кнопки ввода? Встроенный HTML-элемент просто превращается в кнопку с поддержкой тематизации и интерфейса программирования классической нажимной кнопки. Оказывается, для элемента <button> и элементов кнопки отправки или нажимной кнопки виджет jQuery UI в основном действует как способ быстрого применения темы. При применении к флажкам, привязкам или переключателям выполняются более тонкие настройки, поскольку элемент отрисовывается как классическая кнопка, а реагирует на щелчки мышью как встроенная кнопка.

Флажки

Флажок — это графический элемент, который часто используется, если нужно выбрать из двух вариантов: поставить или снять отметку. Обычно это квадрат, в котором пользователь может поставить или снять галочку щелчком мыши. Изображение нажатой или не нажатой кнопки дает тот же эффект. Нажатая кнопка показывает, что параметр выбран, не нажатая — что он не выбран.

Следующий код превращает классический флажок в кнопку с двумя состояниями.

$("#checkbox1").button();

Оригинальный код HTML следующий:

<input id="checkbox1" type="checkbox" checked="checked" />
<label for="checkbox1">
Show more information
</label>

На рисунке 1 изображена полученная графическая кнопка в нажатом/не нажатом виде.  Стиль определила выбранная по умолчанию тема Sunny из библиотеки jQuery UI.

Рисунок 1. Флажок, превращенный в кнопку с двумя состояниями.

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

Обратите внимание, что к флажку как таковому не привязан никакой текст. Текст, который часто отображается рядом с флажком, берется из отдельного элемента HTML <label> с атрибутом for, соответствующим идентификатору флажка. В библиотеке jQuery UI значение элемента <label> (при наличии) используется в качестве текста для кнопки. Ярлык кнопки можно задать программно, через свойство label виджета кнопки. Вот как это происходит на практике.

$("#CheckBox1").button({ label: "Your button caption" });

Аналогичным образом, чтобы считать и записать текущий заголовок кнопки jQuery UI, можно использовать метод option всех виджетов jQuery UI. Следующий код демонстрирует типичный пример использования метода получения и задания свойства label:

// Метод получения
var caption = $("#CheckBox1").button( "option", "label" );
 
// Метод задания
$("#CheckBox1").button( "option", "label", "Your button caption" );

Метод работает для всех типов исходных элементов, преобразованных в кнопку.

Создание списка флажков

Элемент checkbox исключительно полезен в тех случаях, когда пользователь должен сделать выбор. Если бизнес-правило предусматривает выбор из нескольких вариантов, отрисовывается список флажков. В jQuery UI можно применить преобразование кнопки в группу флажков. При этом используется немного другая функция. Собственно, как видно из следующего фрагмента кода, это не так уж сложно.

$("#Toppings").buttonset();

Нужно воспользоваться новой функцией с именем buttonset(). Она группирует все кнопки, отобранные по запросу. В этом примере Options — идентификатор тега <div>; соответственно, все дочерние кнопки включаются в одну группу. Далее приведен пример действительной HTML-разметки, которую можно преобразовать в нечто вроде строки кнопок.

<div id="Toppings">
     <input type="checkbox" id="checkbox1" />
     <label for="check1"> Cheddar </label>
     <input type="checkbox" id="checkbox2" />
     <label for="check2"> Mushrooms </label>
     <input type="checkbox" id="checkbox3" />
     <label for="check3"> Bacon </label>
</div>

На рис. 2 показан графический результат преобразования указанной HTML-разметки в набор кнопок jQuery UI.

Рисунок 2. Несколько флажков, сгруппированных и обработанных как одно целое.

На рисунке 2 первые два элемента выбраны. Если пользователь щелкнет мышью, например, элемент Bacon, соответствующая кнопка будет отрисована в выбранном состоянии. Если щелкнуть одну из выбранных кнопок, выбор будет немедленно отменен.

Обязательно нужно помнить, что API кнопки библиотеки  jQuery UI никоим образом не поддерживает запрос состояния кнопки из набора. При использовании такого списка флажков, как на рисунке 2, скорее всего на каком-то этапе понадобится считать данные о выбранных кнопках. Для этого применяется основной API jQuery. Запросить состояние кнопки можно, например, так:

$("#Toppings input:checked").each(function() {
     alert(this.id);
});

Селектор input:checked позволяет выбрать все элементы ввода, выбранные на текущий момент и находящиеся в элементе с идентификатором Options. Все их можно обработать рекурсивно с помощью функции each.

Дополнительные сведения о наборах кнопок

Давайте еще немного поговорим о внутренних операциях наборов кнопок. При вызове функции buttonset для элемента выбираются все элементы-потомки данного селектора. Затем к каждому выбранному элементу применяется преобразование, заданное функцией button(). Соответственно, для преобразование нужно вызвать набор кнопок в элементе-контейнере.

Чтобы выполнить операции с набором кнопок, сначала нужно написать код селектора jQuery, возвращающего сведения обо всех не выбранных кнопках, а затем вызвать желаемый метод кнопки. Например, для отключения набора кнопок понадобится следующий код:

// Сначала нужно создать набор кнопок (преобразующий
// классические флажки в кнопки)
$("#Toppings").buttonset();
 
// Далее нужно отключить/включить/удалить все кнопки,
// выбрав их с использованием синтаксиса jQuery
$("#Toppings input:checkbox").button("disable");

Переключатели

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

$("#Options").buttonset();

Оригинальный код HTML, конечно, немного другой.

<div id="Options">
     <input type="radio" id="radio1" />
     <label for="radio1"> True </label>
     <input type="radio" id="radio2" />
     <label for="radio2"> False </label>
     <input type="radio" id="radio3" />
     <label for="radio3"> Don’t know </label>
</div>

Рисунок 3. Список переключателей для выбора взаимоисключающих вариантов.

Добавление значка

Еще одно довольно распространенное свойство веб-кнопок — одновременное наличие текста и изображений. Те, кто хочет получить по-настоящему впечатляющие кнопки, нанимают дизайнера и получают набор кнопок с нужным текстом и изображениями. В других случаях просто используют ссылки с креативным стилем CSS. Результат выглядит как обычная нажимная кнопка.

Библиотека jQuery UI — способ, благодаря которому каждый может создать приятно выглядящие кнопки без дизайнера (конечно, дизайнер может сделать кнопки наилучшего качества, но это не всегда нужно).

Чаще всего нужно объединить текст и изображения в одной кнопке, сохранив ее классический интерфейс программирования и поведение. Обычный HTML-код не позволяет этого сделать. Для этого нужно применять JavaScript и HTML. Виджет кнопки упрощает задачу.

Он поддерживает свойство icons — контейнер для двух возможных видов значков. Основной значок отображается слева от текста ярлыка, а второстепенный (при наличии) располагается справа от текста. Ярлык значка выбирается по желанию. Отображаемый текст определяется свойством text, принимающим булево значение. Обратите внимание, что если отображение текста отключено и альтернативный значок (или два) не указан, настройка игнорируется и ярлык (если он задан) отображается как обычно.

Библиотека jQuery UI не позволяет помещать на кнопку любые значки. Поддерживаемые значки заданы в теме jQuery UI как класс. С другой стороны, стиль CSS полностью настраивается как вручную, так и с помощью средства ThemeRoller, которое можно скачать по адресу http://jqueryui.com/docs/Theming/Themeroller. Вот пример установки значка для кнопки:

$("#Button1"). button( {
                text: false,
                icons: {
                    primary: "ui-icon-triangle-1-s"
                }
            })

Если требуется второстепенный значок, прост добавьте в объект icons дополнительную запись, например:

icons: {
    primary: "ui-icon-triangle-1-s",
    secondary: "ui-icon-locked"
}

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

.ui-icon { 
           width: 16px; 
           height: 16px; 
           background-image: url(images/ui-icons_d19405_256x240.png); 
}
:
.ui-icon-triangle-1-s { 
           background-position: -64px -16px; 
}

Основной класс ui-icon задает файл PNG, где хранятся все значки библиотеки с ожидаемым размерами (по умолчанию 16x16). Далее конкретный класс, определяющий конкретный значок, просто выбирает смещение конкретного значка в общем файле PNG. На рисунке 4 показано содержимое примера файла PNG; фактические содержание и цвета зависят от текущей темы jQuery UI.

Рисунок 4. Пример файла с поддерживаемыми значками.

Создание панели инструментов

Панель инструментов представляет собой не более и не менее как коллекцию кнопок любого типа, включая классические нажимные кнопки, переключатели и флажки. Соответственно, создать панель инструментов с помощью jQuery UI не так уж сложно. Все, что потребуется — это поместить все выбранный кнопки в уникальный контейнер HTML (обычно это элемент DIV) и вызвать метод button() для каждой кнопки. Вот пример  HTML-кода панели инструментов:

<div id="container">
   <button> ... </button>
   <button> ... </button>
   <button> ... </button>
   <input type="checkbox" ... />
   <span>
     <input type="radio" ... />
     <input type="radio" ... />
  </span>
</div>

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

$('#Button1').button({
                text: false,
    icons: { primary: 'ui-icon-play' }
})
.click(function() {
    // Что-то нужно сделать ...
});

Преимущество виджета кнопок

Единственные способы подавать команды в веб-приложениях на стороне клиента — это кнопки и ссылки.  На стороне сервера программирование ASP.NET, обработка щелчков мышью по ссылкам и кнопкам не менялась с момента появления ASP.NET и структуры веб-форм. На стороне клиента нажимные кнопки (обычно кнопки отправки) и ссылки всегда представлялись собой два разных типа систем управления с разными возможностями. К тому же еще существует множество вариантов тем кнопок: панели инструментов, переключатели, флажки, флажки с тремя состояниями, кнопки разделения и т.д.

Виджет кнопки jQuery UI призван унифицировать интерфейс программирования и графическую отрисовку кнопок. Соответственно, первый результат — возможность одинаково отрисовывать (и обрабатывать) нажимные кнопки и ссылки. Далее, виджет кнопки — отличная исходная точка для группировки простых кнопок и создания более сложных: кнопок разделения, панелей инструментов и прочего, что может понадобиться при разработке веб-страницы.