Bootstrap Плагин Button (кнопка)
Button (кнопка) вBootstrap Buttonsбыл представлен в главе. С помощью плагина Button (кнопка) вы можете добавлять взаимодействия, такие как управление состояниями кнопок или создание групп кнопок для других компонентов (например, панелей инструментов).
Состояние загрузки
Чтобы добавить кнопке состояние загрузки, просто добавьте элементу buttondata-loading-text="Loading..."в качестве его атрибута, как показано в примере ниже:
Пример
<button id="fat-btn" class="btn btn-primary" data-loading-text="Загрузка..."
type="button">Состояние загрузки</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
// $(this).dequeue();
});
});
});
</script>
Попробуйте »
Результат следующий:
Одиночное переключение
Чтобы активировать одиночное переключение кнопки (т. е. изменить обычное состояние кнопки на нажатое состояние и наоборот), просто добавьте к элементу buttondata-toggle="button"в качестве его атрибута, как показано в примере ниже:
Пример
<button type="button" class="btn btn-primary"
data-toggle="button">Одиночное переключение</button>
Попробуйте »
Результат следующий:
Флажок
Вы можете создать группу флажков и, добавив кbtn-groupатрибут данныхdata-toggle="buttons", включить переключение для группы флажков.
Пример
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox">Вариант 1</label>
<label class="btn btn-primary">
<input type="checkbox">Вариант 2</label>
<label class="btn btn-primary">
<input type="checkbox">Вариант 3</label>
</div>
Попробуйте »
Результат следующий:
Радиокнопки
Аналогично, вы можете создать группу радиокнопок, и добавив кbtn-groupдобавьте атрибут данныхdata-toggle="buttons"чтобы включить переключение для группы радиокнопок.
Пример
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1">Вариант 1</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2">Вариант 2</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3">Вариант 3</label>
</div>
Попробуйте »
Результат следующий:
Использование
Вы можетечерез JavaScriptвключить плагин Button (Button), как показано ниже:
$('.btn').button()
Параметры
Нет доступных опций.
Методы
Вот некоторые полезные методы в плагине Button (Button):
| Метод | Описание | Пример |
|---|
| button('toggle') | Переключает состояние нажатия. Придаёт кнопке активированный вид. Вы можете использоватьdata-toggleатрибут, чтобы включить автоматическое переключение кнопки. |
$().button('toggle') |
| .button('loading') | При загрузке кнопка отключается, а текст меняется на значение атрибутаdata-loading-textэлемента button. |
$().button('loading') |
| .button('reset') | Сбрасывает состояние кнопки, и текстовое содержимое восстанавливается до исходного содержимого. Этот метод очень полезен, когда вы хотите вернуть кнопку в исходное состояние. |
$().button('reset') |
| .button(string) | Строка в этом методе относится к любой строке, объявленной пользователем. При использовании этого метода сбросьте состояние кнопки и добавьте новое содержимое. |
$().button(string) |
Пример
В следующем примере демонстрируется использование вышеуказанных методов:
Пример
<h2>Нажмите каждую кнопку, чтобы увидеть эффекты метода</h2>
<h4>Демонстрация метода .button('toggle')</h4>
<div id="myButtons1" class="bs-example">
<button type="button" class="btn btn-primary">Оригинал</button>
</div>
<h4>Демонстрация метода .button('loading')</h4>
<div id="myButtons2" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Загрузка...">Оригинал</button>
</div>
<h4>Демонстрация метода .button('reset')</h4>
<div id="myButtons3" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Загрузка...">Оригинал</button>
</div>
<h4>Демонстрация метода .button(string)</h4>
<button type="button" class="btn btn-primary" id="myButton4"
data-complete-text="Загрузка завершена">Пожалуйста, нажмите меня</button>
<script>
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
$(function() {
$("#myButtons2 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() {
$("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
$(function() {
$("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script>
Попробуйте »
Результат следующий:
Другие расширения
