Twitter 용 Bootstrap .btn

Question

Twitter Bootstrap 버튼 용 회 전자를 만들려고합니다. 스피너는 진행중인 작업 (즉, 아약스 요청)을 표시해야합니다. 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가 있다는 것입니다 모든 요소에 대해 예상되는 애니메이션 및 회 전자 너비를 CSS를 통해 정의해야합니다. 이 문제를 해결할 방법이 있습니까? 또한, 어쩌면 정렬/스피너를 표시하는 더 좋은 방법이 있습니까?

그리고 단추를 패딩하여 재생해야합니까? 즉, 회 전자가 표시되거나 너비가 변경되는 단추가 괜찮 으면 단추 너비가 변경되지 않습니다. (어딘가에 코드 조각으로 넣으면)

Answer 1

최대 너비의 너비를 사용하여이 문제를 해결할 수있었습니다. 또한 이것은 순수한 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 */ 
} 

Answer 2

. 1 년이되었지만 코드를 개선했습니다. 필자는 각 요소에 span 태그와 i 태그를 수동으로 추가 할 필요가 없었습니다. 이 태그를 자동으로 추가하기 위해 JavaScript 코드를 수정했습니다. 따라서 버튼/링크에 회 전자를 추가하기 만하면 has-spinner 클래스를 추가하고 data-spinner = "[left | right]"태그를 부여합니다 (단추 텍스트의 어느쪽에 회 전자 배치해야합니다).

다음은 수정 된 자바 스크립트입니다 :

$(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'); 
}); 

이});

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

Answer 3

내가 부트 스트랩 (3.3.5), 글꼴 멋진 지금하여 최신을 사용하는 @andrew-dryga 솔루션을 업데이트 한 다음은

는 모든 변경 사항 (CSS, HTML)와 바이올린에 대한 링크입니다 (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/

Answer 4

아주 간단한 해결책이 날

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

에서 유일한 변화 요소를이되었다 변경되었다 근무 변경 I 그랬어.