Button
~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Плагин Button помогает оформить элементы ~lt~button~gt~, ~lt~input~gt~ некоторых типов и якори (~lt~a href="#"~gt~), превратив их в стилизованные кнопки.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~button~gt~Button~lt~/button~gt~
~lt~input type="submit" value="Submit"/~gt~
~lt~a href="#"~gt~Якорь~lt~/a~gt~
~lt~script~gt~
$("button, input:submit, a").button();
$("a").click(function(){return false;}); // отменяет нажатие по якорю
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Объединенные кнопки~lt~/tit~gt~
~lt~coment~gt~Если вместо .button() использовать .buttonset() то можно объединить несколько кнопок в набор. Применять этот метод необходимо не к самим элементам, а к содержащему их контейнеру.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="set"~gt~
~lt~button~gt~Кнопка 1~lt~/button~gt~
~lt~button~gt~Кнопка 2~lt~/button~gt~
~lt~/div~gt~
~lt~script~gt~
$("#set").buttonset();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Замена переключателям~lt~/tit~gt~
~lt~coment~gt~С помощью плагина Button можно превратить переключатели в формах (~lt~input type="radio"~gt~) в кнопки.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~form~gt~
~lt~div id="radio"~gt~
~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~Choice 1~lt~/label~gt~
~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~Choice 2~lt~/label~gt~
~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~Choice 3~lt~/label~gt~
~lt~/div~gt~
~lt~/form~gt~
~lt~script~gt~
$("#radio").buttonset();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Замена флажкам~lt~/tit~gt~
~lt~coment~gt~С помощью плагина Button можно превратить флажки в формах (~lt~input type="checkbox"~gt~) в кнопки.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~form~gt~
~lt~input type="checkbox" id="check" /~gt~~lt~label for="check"~gt~Выключатель~lt~/label~gt~~lt~br~gt~~lt~br~gt~
~lt~div id="format"~gt~
~lt~input type="checkbox" id="check1" /~gt~~lt~label for="check1"~gt~B~lt~/label~gt~
~lt~input type="checkbox" id="check2" /~gt~~lt~label for="check2"~gt~I~lt~/label~gt~
~lt~input type="checkbox" id="check3" /~gt~~lt~label for="check3"~gt~U~lt~/label~gt~
~lt~/div~gt~
~lt~/form~gt~
~lt~script~gt~
$("#check").button();
$("#format").buttonset();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Иконки~lt~/tit~gt~
~lt~coment~gt~С помощью свойства icons, на кнопках можно задавать иконки.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 7pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~button~gt~Кнопка с иконкой~lt~/button~gt~
~lt~button~gt~Кнопка с иконкой слева~lt~/button~gt~
~lt~button~gt~Кнопка с двумя иконками~lt~/button~gt~
~lt~button~gt~Кнопка с двумя иконками без текстом~lt~/button~gt~
~lt~script~gt~
$("button:first").button({
icons:{
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons:{
primary: "ui-icon-locked"
}
}).next().button({
icons:{
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons:{
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Описание
Свойства
Методы
События
Оформление
Плагин 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.
↓ Имя свойства :типы значений (значение по умолчанию)
Останавливает\возобновляет работу плагина Button на
выбранных элементах.
// ------- Работа со свойством disabled ---------
// в момент установки button на элемент
$("selector").button({ disabled: true });
//получение значения disabled
var disabled = $("selector").button( "option", "disabled" );
//изменение значения disabled
$("selector").button( "option", "disabled", 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} );
В этом свойстве задается текст который будет присутствовать на кнопке. По умолчанию, берется значение из элемента: если кнопка стилизована из элемента <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. Для специфичных манипуляций с элементами списка автозаполнения, можно воспользоваться информацией о его структуре:
// если применить плагин Button к кнопке:
~lt~button~gt~Кнопка~lt~/button~gt~
// то Button автоматически внесет следующие изменения:
~lt~button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"~gt~
~lt~span class="ui-button-text"~gt~Кнопка~lt~/span~gt~
~lt~/button~gt~