it-swarm.com.ru

Spinner для Twitter Bootstrap .btn

Я пытаюсь создать спиннеры для кнопок Bootstrap в Twitter. Спиннеры должны указывать на некоторую работу в процессе (т.е. запрос ajax).

Вот небольшой пример: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (полный на jsfiddle):

Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>

Works when width is defined:
<p>
  <a class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </a>
</p>

CSS: 

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}

/* ... */

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}

Дело в том, что css "margin: auto" не создает ожидаемой анимации, а ширину счетчика для всех элементов следует определять через css. Есть ли способ решить эту проблему? Кроме того, возможно есть лучший способ выровнять/показать счетчики?

И я должен играть с отступами кнопок и сделать это таким образом, где ширина кнопки не изменяется, когда показывается счетчик или кнопки, которые меняют ширину, в порядке? (Если заболел, положите его где-нибудь как фрагмент)

12
Andrew Dryga

Я смог решить эту проблему, используя максимальную ширину вместо ширины. Кроме того, это чистое CSS-решение, поэтому его можно использовать практически везде (например, показывать метку X на тегах, когда пользователь наводит на него курсор мыши и т.д.).

Демо: http://jsfiddle.net/AndrewDryga/GY6LC/

Новый CSS:

.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
34
Andrew Dryga

Я обновил @ andrew-dryga решение для использования последней на данный момент Bootstrap (3.3.5), font-awesome (4.3.0), jQuery (2.1.3) и немного изменил его.

Вот:

 <button class="btn btn-success has-spinner">
    <i class="fa fa-spinner fa-spin"></i>
    Foo
 </button>

 $('a.has-spinner, button.has-spinner').click(function() {
     $(this).toggleClass('active');
 });

Кроме того, вам нужны соответствующие модификации CSS ( JSFiddle ).

4
Oleksandr Shybystyi

Очень простое решение работало для меня, меняя элемент с

<i></i>  
with
<em></em>

Это было единственное изменение, которое я сделал.

0
JP Bala Krishna

Я нашел ваш код очень полезным. Я знаю, что прошел год, но я улучшил код. Мне не понравилось вручную добавлять теги span и i к каждому элементу. Я изменил код JavaScript, чтобы автоматически добавлять эти теги. Поэтому все, что вам нужно сделать, чтобы добавить спиннер к кнопке/ссылке, это добавить класс has-spinner к нему и присвоить ему тег data-spinner = "[left | right]" (определяет, с какой стороны текста вашей кнопки вращается должны быть размещены). 

Вот модифицированный JavaScript:

$(function(){

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>",
    spinnerObjects = $(".has-spinner");

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;")
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML)
spinnerObjects.click(function() {
    $(this).toggleClass('active');
});

});

Вот ссылка на скрипку со всеми изменениями (CSS, HTML):

http://jsfiddle.net/codyschouten/QKefn/2/

0
Cody Schouten