Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Bootstrap3 дополнение » Состояние кнопки – Bootstrap 3

07.12.2016


09:03


2843


пока нет


Состояние кнопки – Bootstrap 3

Состояние кнопки – 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>



Случайные записи:

  1. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
  2. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25
  3. Слои в CSS. Основы CSS для начинающих. Урок №16
  4. Цикл While (Do- While). Основы PHP с нуля. Урок №11
  5. Переменные в php. Основы PHP с нуля. Урок №5

Последние записи рубрики:

  1. Пагинация (pagination) – Bootstrap3

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245