Кнопки UI

Материал из JQuery

Перейти к: навигация, поиск

Button


Описание
Свойства
Методы
События
Оформление

Плагин Button позволяет стилизовать кнопоки на странице (элементы <input> с типами reset или submit, а так же элементы <button>). Кроме этого, с помощью этого плагина, можно превратить в кнопки элементы <a href="#"> (якори), флажки и переключатели (элементы <input> с типами checkbox и radio). Кнопки, сделанные из флажков и переключателей могут находится в двух состояниях: выбрано/не выбрано и за счет этого не теряют своей первоначальной функциональности.

Можно объединить несколько кнопок в группу (см. пример "Объединенные кнопки" выше). Для этого нужно вместо метода .button(), воспользоваться .buttonset(). И если .button() нужно применять непосредственно к элементам, которые вы хотите сделать кнопками, то .buttonset() применяется к контейнеру, содержащему все элементы, которые должны стать группой кнопок:

<!-- Делаем отдельную кнопку: -->
  <button>Кнопка</button>
 
  <script>
    $("button").button();
  </script>
 
<!-- Делаем группу кнопок: -->
  <div id="set">
    <button>Кнопка 1</button>
    <button>Кнопка 2</button>
  </div>
 
  <script>
    $("#set").buttonset();
  </script>

Кроме обычного текста, на кнопки можно добавлять иконки (см. пример "Иконки" выше). Однако, иконки не могут быть добавлены элементам <input> типа button, submit или reset.


↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет работу плагина Button на выбранных элементах.
// ------- Работа со свойством disabled ---------
// в момент установки button на элемент
$("selector").button({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").button( "option", "disabled" );
//изменение значения disabled
$("selector").button( "option", "disabled", true );
text:boolean(true)
Если это свойство выключено, то кнопка не будет содержать текста. Однако, это свойство будет проигнорировано, если не будут заданы иконки.
// ------- Работа со свойством text ---------
// в момент установки button на элемент
$("selector").button({ text: false });
 
//получение значения text
var text = $("selector").button( "option", "text" );
//изменение значения text
$("selector").button( "option", "text", false );
icons:object({primary:null, secondary:null})
В этом свойстве можно задать две иконки, которые будут расположены до (primary) и после (secondary) текста на кнопке. Иконки задаются с помощью класса, в котором прописан фон с необходимой иконкой. Для этого можно воспользоваться стандартными иконками UI.
// ------- Работа со свойством icons ---------
// в момент установки button на элемент
$("selector").button({ icons: {primary:ui-icon-gear, secondary:null} });
 
//получение значения icons
var icons = $("selector").button( "option", "icons" );
//изменение значения icons
$("selector").button( "option", "icons", {primary:ui-icon-gear, secondary:null} );
label:string(см. описание)
В этом свойстве задается текст который будет присутствовать на кнопке. По умолчанию, берется значение из элемента: если кнопка стилизована из элемента <button>, то будет взято его содержимое, а если кнопка получена из элемента <input>, то берется значения аттрибута value или привязанного к нему элемента <label> (обычно для случаев флажков и переключателей).
// ------- Работа со свойством label ---------
// в момент установки button на элемент
$("selector").button({ label: {primary:ui-icon-gear, secondary:null} });
 
//получение значения label
var label = $("selector").button( "option", "label" );
//изменение значения label
$("selector").button( "option", "label", {primary:ui-icon-gear, secondary:null} );

↓ Способ вызова
.button("destroy") 
Удаляет всю функциональность плагина button с выбранных элементов.
.button("disable") 
Останавливает работу плагина button на выбранных элементах. Для возобновления, необходимо воспользоваться методом .button("enable").
.button("enable") 
Возобновляет работу плагина button на выбранных элементах (например, после того, как она была остановлена с помощью .button("disable")).
.button("option", optionName, [value]) 
Этот метод позволяет изменять/получать свойства плагина button. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .button("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.button("widget") 
Возвращает те из выбранных элементов, к которым был применен плагин button (поиск осуществляется по классу ui-button, который автоматически присваивается этим элементам).
.button("refresh") 
Обновляет визуальное состояние кнопки. Это может понадобиться, если у лежащего в основе кнопки элемента, программно было изменено состояние (например он стал неактивен (disabled)).

↓ Внутреннее имя события :внешнее имя
create:buttoncreate
Событие create происходит в момент инициализации button на элементе.
// обработка события create
$("selector").button({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "buttoncreate", function(event, ui){ ... });

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