wake-up-neo.com

Spinner für Twitter Bootstrap .btn

Ich versuche, Spinner für Twitter Bootstrap-Buttons zu erstellen. Spinner sollten einige laufende Arbeiten anzeigen (z. B. Ajax-Anforderung).

Hier ein kleines Beispiel: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (voll auf 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;
}

Der Deal ist, dass css "margin: auto" keine erwarteten Animationen erzeugt und die Spinnerbreiten für alle Elemente sollten über css definiert werden. Gibt es eine Möglichkeit, dieses Problem zu lösen? Vielleicht gibt es auch eine bessere Möglichkeit, Spinner auszurichten/zu zeigen?

Und sollte ich mit dem Auffüllen der Knöpfe spielen und es so gestalten, dass sich die Breite der Knöpfe nicht ändert, wenn der Spinner angezeigt wird oder die Knöpfe, deren Breite sich ändert, in Ordnung sind? (Wenn krank es als Schnipsel irgendwo legen)

12
Andrew Dryga

Ich konnte dieses Problem durch Verwendung von max-width istead of width beheben. Auch dies ist eine reine CSS-Lösung, so dass sie nahezu überall verwendet werden kann (z. B. X-Markierung auf Tags anzeigen, wenn der Benutzer die Maus darüber bewegt, usw.).

Demo: http://jsfiddle.net/AndrewDryga/GY6LC/

Neues 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

Ich habe @ andrew-dryga aktualisiert, um den aktuellsten Bootstrap (3.3.5), font-awesome (4.3.0), jQuery (2.1.3) zu verwenden und etwas zu modifizieren.

Hier ist es:

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

Zusätzlich benötigen Sie entsprechende CSS-Modifikationen ( JSFiddle ).

4

Eine sehr einfache Lösung funktionierte für mich darin, das Element zu ändern

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

Dies war die einzige Änderung, die ich vorgenommen habe.

0
JP Bala Krishna

Ich fand Ihren Code sehr hilfreich. Ich weiß, es ist ein Jahr her, aber ich habe den Code verbessert. Ich mochte es nicht, die Bereiche span und i manuell zu jedem Element hinzufügen zu müssen. Ich habe den JavaScript-Code angepasst, um diese Tags automatisch hinzuzufügen. Alles, was Sie tun müssen, um einem Button/Link einen Spinner hinzuzufügen, ist das Hinzufügen der has-Spinner-Klasse und das Data-Spinner = "[left | right]" - Tag sollte plaziert sein). 

Hier ist das modifizierte 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');
});

});

Hier ist der Link zur Geige mit allen Änderungen (CSS, HTML):

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

0
Cody Schouten