Comment append un texte de suffixe dans JQuery Spinner

J’ai eu le même problème.

Avec la fabrique de widgets de jQuery UI, c’est assez simple:

 $.widget( "ui.pcntspinner", $.ui.spinner, { _format: function(value) { return value + '%'; }, _parse: function(value) { return parseFloat(value); } }); $("#spinner").pcntspinner({ min: 0, max: 100, step: .01 }); 

Démo: http://jsfiddle.net/aAHuT/

Si des entiers doivent être utilisés, ‘_parse’ doit être adapté pour pouvoir utiliser parseInt() :

 _parse: function(value) { return parseInt(value); } 

L’exemple d’interface utilisateur jQuery pour Time Spinner a été très utile pour proposer cette solution.

Cela devrait être possible puisque, selon la documentation de la page à laquelle vous avez accédé:

suffixe (chaîne)

Suffixe de caractère après le nombre. Couramment utilisé pour les signes de pourcentage. La valeur par défaut est ”.

Si cela n’a pas fonctionné, que s’est-il passé à la place?

La démo semble fonctionner pour moi.

J’envisagerais d’append une entrée supplémentaire montrant un texte avec un suffixe, alors que le compteur ne contient que des nombres. C’est un moyen pratique de travailler avec des données publiées.

 $( ".spinner" ).spinner({ min: 1, max: 999, spin: function() { $(this).siblings('.spinner-text').val($(this).val()+' items'); }, stop: function() { $(this).siblings('.spinner-text').val($(this).val()+' items'); } }).parent().append(''); 

http://jsfiddle.net/6t9bS/3/

A mon avis, la meilleure solution consiste à utiliser CSS:

 .percentspinner .ui-spinner:before { content: "%"; width: 40px; padding-top: 5px; position: absolute; top: 0; right: 0; } 

Avec le code HTML suivant:

Et JavaScript:

  $("#spinner").spinner({step: 0.01}); 

JSFiddle

Il s’agit de la mise en œuvre la plus simple pour expliquer l’idée. Je suggère d’utiliser l’alignement de texte et le droit de remplissage d’obtenir la flexibilité souhaitée.

J’ai essayé / envisagé de nombreuses approches, mais ensuite je suis venu avec cette idée. De mon sharepoint vue, il présente les avantages les plus importants tels que: le caractère “%” n’influence pas le contenu soumis, l’utilisateur peut toujours modifier la valeur, mais il n’a pas besoin de penser “et si je supprime le caractère?” ..