Виджет Button

Веб-программирование --- jQuery UI --- Виджет Button

»» В данной статье используется исходный код для примеров тестирования библиотеки jQuery UI. Сохраните эту страницу для тестирования приведенных ниже примеров.

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

Первый из виджетов, с которым вы начнете работать, предоставляет неплохую возможность познакомиться с миром jQuery UI. Виджет Button относительно прост, но это не мешает ему оказывать трансформирующее воздействие на HTML-документы. Данный виджет обеспечивает применение темы jQuery UI к элементам button и a. Это означает, что размер, форма, характеристики шрифта и цвет элемента преобразуются таким образом, чтобы их внешний вид соответствовал выбранной вами теме оформления jQuery UI.

Как показано в примере ниже, применение виджетов jQuery UI не доставляет особых хлопот:

$(function() {
		
	$('button').button();
		
});

Применение виджета Button сводится к использованию jQuery для выбора элементов, которые вы хотите преобразовать, и вызову метода button(). Все остальные заботы jQuery UI берет на себя.

Результат представлен на рисунке ниже. Обратите внимание на то, что метод button() применяется к объекту выбранного набора элементов jQuery. Между библиотеками jQuery и jQuery UI существует очень тесная интеграция, а это означает, что jQuery UI в целом используется так же, как и базовые средства jQuery, рассмотренные ранее.

Подобно всем остальным виджетам jQuery UI, виджет Button, который вы видите на рисунке как кнопку, представляет собой набор стилей CSS, примененных к существующему HTML-элементу. В результате применения метода button() HTML-элемент

<button type="submit">Заказать</button>

преобразуется в следующий элемент:

<button type="submit" class="ui-button ui-widget ui-state-default
   ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
       <span class="ui-button-text">Заказать</span>
</button>

Элегантность этого подхода состоит в том, что он позволяет работать с HTML-элементами привычным способом, не заботясь о том, применены к ним виджеты jQuery UI или нет.

Настройка виджета Button

Виджет Button jQuery UI имеет ряд настраиваемых свойств, с помощью которых можно управлять способом создания результирующей кнопки. Перечень этих свойств приведен в таблице ниже:

Описанные опции могут применяться двумя способами. Первый способ предполагает использование объекта отображения при вызове метода button(), как показано в примере ниже:

$(function() {
		
	// Определение свойств с помощью объекта отображения
	$('button').button({
		label: "Заказать цветы",
		disabled: true
	});

	$('button').button("option","disabled",false);
		
});

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

В примере выше продемонстрирован и второй способ, который используется для получения или задания новых значений свойств уже после создания экземпляра виджета. В данном случае также вызывается метод button(), но теперь с тремя аргументами. Первый аргумент — это имя метода option, второй — свойство, значение которого вы хотите изменить, а третий — новое значение, присваиваемое свойству. Здесь для свойства disabled устанавливается значение false, которое заменяет значение, установленное перед этим с помощью объекта отображения при создании экземпляра виджета.

Обе методики могут объединяться в одном вызове. В этом случае методу button() в качестве первого аргумента передается метод option, а в качестве второго объект отображения. Это позволяет указать сразу несколько опций при вызове метода button():

$(function() {
		
    $('button').button()
    
    $('button').button("option", {
        label: "Заказать цветы",
        disabled: false
    });
    
    console.log("Кнопка отключена? " + $('button').button("option", "disabled"));
		
});

Для чтения значения параметра здесь используется все тот же немного "корявый" синтаксис. В данном случае метод button() вызывается с двумя аргументами. Первый из них — метод option, а второй — свойство, значение которого требуется получить. Эта инструкция считывает значение свойства disabled и выводит его на консоль:

Использование значков jQuery UI на кнопках

Темы jQuery UI включают ряд изображений в виде значков, которые можно использовать для любых целей, в том числе для отображения на кнопках. Пример использования значков на кнопках jQuery UI приведен в ниже:

$(function() {
		
    $('button').button({
		icons: {
			primary: "ui-icon-star",
			secondary: "ui-icon-circle-arrow-e"
		}
    });
		
});

Опция icons позволяет указать, какие значки следует отображать. В виджете Button для значков предусмотрены две позиции. Свойству primary соответствует значок, располагающийся слева от текста, а свойству secondary — справа от текста. Как показано в примере выше, для указания требуемых значков используется объект со свойствами primary и secondary. Любое из этих свойств может быть опущено, что приведет к отображению только одного значка. Размеры самих значков очень малы, как показано на рисунке:

Значки идентифицируются с помощью классов, определения которых содержатся в CSS-файле jQuery UI. Общее число доступных значков составляет 173 — слишком много, чтобы здесь можно было привести их полный список. Проще всего выбрать нужный значок, посетив сайт jqueryui.com. Выберите страницу Themes и перейдите к ее нижней части. Там вы увидите весь набор значков, представленный в виде таблицы. При наведении указателя мыши на какой-либо значок отображается имя класса, соответствующего данному значку:

Имя значка, появляющееся во всплывающей подсказке, начинается с точки (.), которую при указании значка в опции icons следует опускать. Например, если при наведении указателя мыши на первый из значков отображается имя класса .ui-icon-caret-l-n, то для того, чтобы использовать на кнопке это изображение, в свойствах primary и secondary следует указывать значение ui-icon-caret-l-n.

Применение пользовательских изображений

Из-за небольшого размера значков jQuery UI я редко использую их в своих приложениях. Для вывода других изображений на кнопках jQuery UI существует несколько способов. Один из них заключается во вставке элемента img в тот HTML-элемент button, к которому применяется интерфейс jQuery UI. Кнопка jQuery UI должным образом учитывает содержимое базового элемента button, и коль скоро вы используете изображение с прозрачным фоном, то вам не нужно заботиться о том, чтобы оно хорошо вписывалось в выбранную вами тему оформления.

Простой пример этого приведен ниже:

$(function() {
		
    $('button')
        .text("")
        .append("<img src=rightarrows.png width=100 height=30 />")
        .button();
		
});

Свойство text кнопки jQuery UI можно использовать для отмены отображения содержимого базового элемента button только в том случае, если свойство icon имеет значение true. Если же отмена отображения текста кнопки требуется в том случае, когда значки jQuery UI не используются, то для получения требуемого результата следует использовать метод text() jQuery и установить с его помощью пустую строку в качестве содержимого кнопки. После этого достаточно вызвать метод append() для вставки элемента img и метод button() для создания кнопки jQuery UI. Конечный результат представлен на рисунке:

Использование методов виджета Button

Кроме свойств, виджеты jQuery UI имеют также методы, которые можно использовать для управления виджетами после их создания. Собственно говоря, они не являются истинными методами, поскольку их вызов осуществляется несколько необычным способом — путем передачи имени метода в качестве аргумента методу button(), с чем мы уже сталкивались ранее, когда изменяли значения свойств кнопки с помощью метода option. Тем не менее мы будем называть их методами, поскольку именно такая терминология принята в jQuery UI.

Перечень доступных методов вместе с кратким описанием их назначения приведен в таблице ниже:

Удаление виджета

Метод destroy удаляет виджет jQuery UI из HTML-элемента, возвращая его в исходное состояние. Соответствующий пример приведен ниже:

$(function() {
		
    $('button').button().click(function(e) {    
        $('button').button("destroy");
        e.preventDefault();        
    })
		
});

В этом примере с помощью метода click() регистрируется обработчик щелчка на кнопке. Обратите внимание, что это не требует принятия каких-либо специальных мер в связи с использованием jQuery UI. Внутри функции-обработчика вызывается метод destroy, так что щелчок на кнопке приводит к тому, что она отключает саму себя.

Включение и отключение кнопки

Методы enable и disable позволяют изменить состояние кнопки jQuery UI, как показано в примере ниже:

$(function() {
		
    $('<span>Включена<span><input type=checkbox checked />').prependTo('#buttonDiv');
    $(':checkbox').change(function(e) {
        $('button').button(     
            $(':checked').length == 1 ? "enable" : "disable"
        )
    });
	
	$('button').button();
		
});

В этом сценарии в документ вставлен флажок, и с помощью метода change() зарегистрирована функция, которая будет вызываться каждый раз при снятии или установке флажка. Для изменения состояния кнопки в соответствии с состоянием флажка используются методы enable и disable. Результат представлен на рисунках:

Обновление состояния кнопки jQuery UI

Метод refresh обновляет состояние кнопки jQuery UI для учета любых возможных изменений базового HTML-элемента. Этой возможностью удобно пользоваться для отражения изменений, вносимых программным путем, как показано в примере ниже:

$(function() {
		
    $('<span>Включена<span><input type=checkbox checked />').prependTo('#buttonDiv');
    $(':checkbox').change(function(e) {
        var buttons = $('button');
        if ($(':checked').length == 1) {            
            buttons.removeAttr("disabled");
        } else {
            buttons.attr("disabled", "disabled");
        }
        buttons.button("refresh");
    });
	
	$('button').button();
		
});

В этом примере флажок используется для управления добавлением и удалением атрибута disabled из HTML-элемента button. Поскольку jQuery UI не обеспечивает автоматического обнаружения этих изменений, то для синхронизации состояний используется метод refresh.

Использование событий виджета Button

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

Пример использования события create представлен ниже:

$(function() {
		
    $('button').button({
        create: function(e) {
            $(e.target).click(function(ev) {
                ev.preventDefault();
                alert("Была нажата кнопка");
            })
        }
    });
		
});

Здесь событие create используется для определения функции, которая будет вызываться в ответ на выполнение щелчка на кнопке. Я не отношу событие create к разряду особенно полезных, поскольку считаю, что все то, что может быть выполнено в ответ на возникновение этого события, можно реализовать в рамках более широкого подхода, обеспечиваемого jQuery.

Создание различных типов кнопок

Метод button() различает виды элементов, к которым он применяется. Базовое поведение, соответствующее поведению обычной кнопки, создается при вызове метода button() для элементов button, a и input, атрибут type которых имеет одно из значений submit, reset или button. Пример преобразования всех этих элементов в кнопки jQuery UI приведен ниже:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
                    
            $('.jqButton').click(function(e) {
               e.preventDefault();
               $(this).button();
            });
			
        });
    </script>
</head>
<body>
    <form>
        <input class="jqButton" type="submit" id="inputSubmit" value="Submit">
        <input class="jqButton" type="reset" id="inputReset" value="Reset">
        <input class="jqButton" type="button" id="inputButton" value="Input Button">
        <button class="jqButton">Button Element</button>
        <a class="jqButton" href="http://apress.com">A Element</a>
    </form>
</body>
</html>

В этом простом документе определены все вышеупомянутые элементы. Функция, переданная методу click(), обеспечивает преобразование каждого из элементов в соответствующую кнопку jQuery UI при выполнении щелчка на нем. Результаты такого преобразования представлены на рисунке:

Создание кнопки-переключателя

Вызвав метод button() для элемента input, типом которого является checkbox, вы получите кнопку-переключатель. Эта кнопка может находиться в двух состояниях — "включено" и "выключено" — и поочередно переходит из одного в другое при выполнении на ней щелчков, следуя за сменой состояний "отмечено" и "не отмечено" базового элемента-флажка. Соответствующий пример приведен ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            $('.jqButton').button();
        });
    </script>
</head>
<body>
    <form>
        <input class="jqButton" type="checkbox" id="toggle">
        <label for="toggle">Переключи меня</label>
    </form>
</body>
</html>

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

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

Создание группы переключателей

Метод buttonset() позволяет объединить ряд взаимозависимых переключателей (радиокнопок, т.е. элементов input с типом radio) в группу jQuery UI, как показано в примере ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            $('#radioDiv').buttonset();
        });
    </script>
</head>
<body>
    <form>
        <div id="radioDiv">
            <input type="radio" name="flower" id="rose" checked />
                <label for="rose">Роза</label>
            <input type="radio" name="flower" id="lily"/><label for="lily">Лилия</label>
            <input type="radio" name="flower" id="iris"/><label for="iris">Орхидея</label>
        </div>
    </form>
</body>
</html>

Обратите внимание на то, что метод buttonset() вызывается для предварительно выбранного набора переключателей (радиокнопок), содержащихся в контейнерном элементе div. В данной ситуации вы не должны вызывать метод button() для каждого из элементов input по отдельности. Результат применения метода buttonset() представлен на рисунке:

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

Создание группы обычных кнопок jQuery UI

Метод buttonset() можно использовать по отношению к любым другим элементам, к которым применим метод button(). Конечным результатом этого является применение стиля группы переключателей, но не поведения, поэтому каждая кнопка будет работать независимо от других. Пример такого варианта использования метода buttonset() представлен ниже:

...
   <form>
        <div id="radioDiv">
            <input type="submit" value="Submit"/>
            <input type="reset" value="Reset"/>
            <input type="button" value="Нажми меня"/>
            <a href="http://professorweb.ru">Посетите веб-сайт</a>
        </div>
    </form></code></pre>

В кнопку преобразуется любой подходящий элемент, находящийся внутри контейнера div, а стыкующиеся края кнопок стилизуются точно так же, как и в случае переключателей, как показано на рисунке:

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