web-dev-qa-db-ja.com

TwitterのスピナーBootstrap .btn

Twitterのスピナーを作成しようとしているBootstrapボタン。スピナーは進行中の作業（つまり、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を介して定義する必要があるということです。この問題を解決する方法はありますか？また、スピナーを整列/表示するより良い方法がありますか？

そして、ボタンのパディングで遊んで、スピナーが表示されたり、幅を変更するボタンが大丈夫なときに、ボタンの幅が変わらないようにする必要がありますか？ （病気の場合、スニペットとしてどこかに配置する）

csshtml5css3twitter-bootstrapcss-transitions
12
Andrew Dryga

幅の代わりにmax-widthを使用して、この問題を修正できました。また、これは純粋な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 */
}
35
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

あなたのコードは非常に役立つことがわかりました。 1年が経過したことは知っていますが、コードを改善しました。 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