Spinner for Twitter Bootstrap .btn

Im пытается создать прядильщицы для Twitter Кнопки Bootstrap. Спиннеры должны указывать на какую-либо работу (т. Е. Запрос ajax).Spinner for Twitter Bootstrap .btn

Вот небольшой пример: 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 "маржа: авто" Безразлично» t производить ожидаемую анимацию, а ширину счетчика для всех элементов следует определять с помощью css. Есть ли способ решить эту проблему? Кроме того, может быть, есть лучший способ выровнять/показать прядильщиков?

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

источник

2013-04-12 Andrew Dryga

Это не дублированные вопросы, но они связаны с вашим вопросом: http://stackoverflow.com/q/3508605/1004046 и http://stackoverflow.com/q/3149419/1004046 – Pigueiras

Я уже привязал к играйте с max-width и: not (.active) селектором, кажется, что вам нужно задать разницу по ширине для всех элементов ... Я пытаюсь играть с абсолютным позиционированием tommorow. –

Ничего себе, это красиво выглядящий прядильщик! Вы должны попытаться получить это в Bootstrap! –

Я смог исправить эту проблему, используя max-width istead ширины. Также это чистое решение для 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 */ 
}

источник

2013-04-13 14:24:37

Ницца. Но как вы их остановите? – liang

Я думаю, вы должны сначала проверить JSFiddle. Просто добавьте/удалите активный класс, чтобы показать/скрыть прядильщик –

Это решение основано на Bootstrap 3 CSS? – mortensi

Я нашел код, чтобы быть супер полезно. Я знаю, что прошло уже год, но я улучшил код. Мне не нравилось вручную добавлять теги span и i к каждому элементу. Я изменил код JavaScript, чтобы автоматически добавлять эти теги. Итак, все, что вам нужно сделать, чтобы добавить прядильщик к кнопке/ссылке, добавляет к нему класс-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/

источник

2014-04-22 14:41:35

Спасибо. У меня есть одна проблема с вашим кодом, вы не должны добавлять в текст кнопки, так как он разбивает текст на кнопку. Также я предпочитаю не использовать javascript, так как мне не нравится смешивать разметку и логику, поэтому программист всегда строго заявляет, что хочет получить в html. Я думаю, что это более бутстраповая философия –

Я обновил @andrew-dryga решение использовать самую последнюю теперь самозагрузки (3.3.5), шрифт-устрашающий (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 изменения http://jsfiddle.net/oshybystyi/v04ag5ch/4/

источник

2015-07-03 11:16:36

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

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

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

источник

2016-03-25 04:07:12

Spinner for Twitter Bootstrap .btn

ответ

Смежные вопросы