web-dev-qa-db-fra.com

Spinner pour Twitter Bootstrap .btn

J'essaie de créer des fileuses pour les boutons Twitter Bootstrap. Les fileurs doivent indiquer des travaux en cours (par exemple, une demande ajax).

Voici un petit exemple: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (complet sur 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;
}

Le problème est que css "margin: auto" ne produit pas l'animation attendue et que la largeur des coudes pour tous les éléments doit être définie via css. Y at-il un moyen de résoudre ce problème? Aussi, peut-être qu'il y a une meilleure façon d'aligner/montrer les fileurs?

Et devrais-je jouer avec des boutons de rembourrage et le faire de manière à ce que la largeur des boutons ne change pas, lorsque le bouton fléché est affiché ou que les boutons qui changent de largeur fonctionnent? (Si malade, le mettre comme extrait quelque part)

csshtml5css3twitter-bootstrapcss-transitions
12
Andrew Dryga

J'ai pu résoudre ce problème en utilisant max-width istead of width. Il s’agit également d’une solution CSS pure, qui peut donc être utilisée un peu partout (par exemple, affichez la marque X sur les balises, passez la souris dessus, etc.).

Démo: http://jsfiddle.net/AndrewDryga/GY6LC/

Nouveau 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

J'ai mis à jour @ andrew-dryga solution pour utiliser les dernières versions de Bootstrap (3.3.5), font-awesome (4.3.0), jQuery (2.1.3) et l'a légèrement modifié.

C'est ici:

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

De plus, vous avez besoin des modifications CSS appropriées ( JSFiddle ).

4
Oleksandr Shybystyi

Très simple solution a fonctionné pour moi était de changer l'élément de

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

Ce fut le seul changement que j'ai fait.

0
JP Bala Krishna

J'ai trouvé votre code très utile. Je sais que cela fait un an mais j'ai amélioré le code. Je n'ai pas aimé avoir à ajouter manuellement les balises span et i à chaque élément. J'ai modifié le code JavaScript pour ajouter ces balises automatiquement. Donc, tout ce que vous avez à faire pour ajouter un spinner à un bouton/lien est de lui ajouter la classe has-spinner et de lui attribuer une balise data-spinner = "[left | right]" (détermine de quel côté du texte du bouton le spinner devrait être placé). 

Voici le code JavaScript modifié:

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

});

Voici le lien vers le violon avec tous les changements (CSS, HTML):

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

0
Cody Schouten