StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Главная » Bootstrap3 дополнение » Состояние кнопки – Bootstrap 3
07.12.2016
09:03
6216
пока нет
Состояние кнопки – Bootstrap 3
Всем привет!
Горю сильным желанием дополнить тему «Кнопки. Урок №7» темой «Состояние кнопок».
Итак, при нажатии на кнопку, можно сделать так, что состояние кнопки будет в нажатом положении или же, можно сделать так, что при нажатии, на кнопке появится текст «Загрузка…».
Я думаю, что демонстрация того, как будет выглядеть в живую, то, что я хочу сегодня предложить вам для ваших веб-страниц, будет более красноречива, нежели долгие пояснения.
Смотрим демонстрацию:
Пример с методом "toogle"
Пример с методом "loading"
Пример с методом "loading"
Пример с методом "reset"
Пример с методом "reset"
Пример с методом "string"
Пример с методом "string"
Методы и состояния кнопок
| Метод | Описание |
| .button('toggle') | Метод "toggle" - переводит кнопки в нажатое состояние |
| .button('loading') | Метод "loading" - устанавливает кнопку в состояние загрузки. Во время этого состояния кнопка становится неактивной. |
| .button('reset') | Метод "reset" - устанавливает кнопки в состояние загрузки, потом сбрасывает состояние кнопки на обычный с заменой текста на первоначальный. |
| .button(string) | Метод "string" - устанавливает кнопки в состояние загрузки, потом сбрасывает состояние кнопки на другой текст, например, «загрузка завершена» |
Теперь сам код.
Между тегами <head></head> вставляем вот такой код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Теперь между тегами <body></body> вставляем вот такой код:
Пример с методом "toogle"
<!-- Пример с методом "toogle" -->
<script type="text/javascript">
$(document).ready(function(){
$("#myButtons1 .btn").click(function(){
<!-- Метод "toogle" -->
$(this).button('toggle');
});
});
</script>
<p>Пример с методом "toogle"</p>
<div id="myButtons1">
<button type="button" class="btn btn-default">По умолчанию</button>
<button type="button" class="btn btn-primary">Основная</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-danger">Опасность</button>
</div>
Пример с методом "loading"
<!-- Пример с методом "loading" -->
<script type="text/javascript">
$(document).ready(function(){
$("#myButtons2 .btn").click(function(){
<!-- Метод "loading" -->
$(this).button('loading').delay(1000).queue(function(){
$(this).dequeue();
});
});
});
</script>
<p>Пример с методом "loading"</p>
<div id="myButtons2">
<form action="#" autocomplete="off">
<button type="button" class="btn btn-default" data-loading-text="Загрузка...">По умолчанию</button>
<button type="button" class="btn btn-primary" data-loading-text="Загрузка...">Основная</button>
<button type="button" class="btn btn-success" data-loading-text="Загрузка...">Успех</button>
<button type="button" class="btn btn-info" data-loading-text="Загрузка...">Информация</button>
<button type="button" class="btn btn-warning" data-loading-text="Загрузка...">Предупреждение</button>
<button type="button" class="btn btn-danger" data-loading-text="Загрузка...">Опасность</button>
</form>
</div>
Пример с методом "reset"
<!-- Пример с методом "reset" -->
<script type="text/javascript">
$(document).ready(function(){
$("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
<!-- Метод "reset" -->
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
<p>Пример с методом "reset"</p>
<div id="myButtons3">
<form action="#" autocomplete="off">
<button type="button" class="btn btn-default" data-loading-text="Загрузка...">По умолчанию</button>
<button type="button" class="btn btn-primary" data-loading-text="Загрузка...">Основная</button>
<button type="button" class="btn btn-success" data-loading-text="Загрузка...">Успех</button>
<button type="button" class="btn btn-info" data-loading-text="Загрузка...">Информация</button>
<button type="button" class="btn btn-warning" data-loading-text="Загрузка...">Предупреждение</button>
<button type="button" class="btn btn-danger" data-loading-text="Загрузка...">Опасность</button>
</form>
</div>
Пример с методом "string"
<!-- Пример с методом "string" -->
<script type="text/javascript">
$(document).ready(function(){
$("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
<!-- Метод "string" -->
$(this).button('complete');
$(this).dequeue();
});
});
});
</script>
<p>Пример с методом "string"</p>
<div>
<button type="button" class="btn btn-info" id="myButton4" data-loading-text="Загрузка..." data-complete-text="Загрузка завершена" autocomplete="off">Нажми на меня</button>
</div>
Случайные записи:
- Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6
- Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11
- Функции (function). Основы PHP с нуля. Урок №16
- Работа с файлами-3 (дополнительные функции и возможности). Основы PHP с нуля. Урок №21
- Списки. Основы bootstrap 3 для начинающих. Урок №8