web-dev-qa-db-fra.com

changement jquery.ui.spinner

J'essaie d'utiliser la dernière version du fichier jquery.ui.spinner.js. http://wiki.jqueryui.com/w/page/12138077/Spinner

Les filateurs affichent et mettent à jour les zones de texte, mais j'ai du mal à comprendre comment capturer l'événement de «changement». Cela se déclenche lorsque vous modifiez manuellement la valeur dans la zone de texte, mais pas lorsque vous utilisez les flèches de défilement.

jquery:

    $('input[name*="opening"]').spinner({ min: 0, max: 100});

    $('#doorsize6w7h-f').spinner().change(function(){
         alert($(this).spinner('value'));
    });

html:

<input type="text" value="0" class="front" id="doorsize6w7h-f" name="opening[0][0]" />
jqueryeventsuser-interfacespinneronchange
20
etriad

Attachez un événement aux contrôles de sélection qui appelle change() dans votre zone de texte.

$('.ui-spinner-button').click(function() {
   $(this).siblings('input').change();
});

jsFiddle .

Après avoir installé la roulette.

35
alex

Je pense que c'est ce dont vous avez besoin:

$('.mySpinner').spinner({          
    stop:function(e,ui){
        alert('Triggered after a spin.');
    }
});

Contrairement à la liaison à l'événement click des boutons, cela détectera également l'utilisation des touches haut/bas du clavier.

Voir cette page pour plus de détails et plus d’événements: http://api.jqueryui.com/spinner/#entry-examples

18
Pablo S G Pacheco

Il n'y a pas d'événement "change", utilisez plutôt l'événement "spinstop":

$('#doorsize6w7h-f').on("spinstop", function(){
   alert($(this).spinner('value'));
});

La documentation suggère également l’événement spinchange, mais c’est un peu lent pour moi.

Ressource: http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner%2Fspinner%2Fspinner%26redirect%3redno3%%%%%%%F%C3%A9%%F%C3%A9FR -changement

8
Arman Bimatov

Eh bien, en fait, j'acheminerais les modifications par le biais d'un événement standard 'change' et je capturerais tout, comme cela:

$('input[name*="opening"]').spinner({
    min: 0,
    max: 100,
    spin: function(event, ui) {
        $(this).change();
    }
});
6
George Mavritsakis

Cela me donne les résultats les plus fluides:

function betterSpinner(input)
{
    input.spinner(
    {
        spin: function(event, ui)
        {
            // the spin event is raised before the value actually gets changed,
            // so let's update it here before raising the input's change() event.
            input.val(ui.value);
            input.change();
        }
    });
}

$(document).ready(function ()
{
    betterSpinner($("#myInput"));
});
1
mm201

Je sais que cette question a déjà été répondu. Mais j'espère que cela aidera les autres.

En plus de modifier manuellement la valeur et d’utiliser le bouton fléché du spinner, vous pouvez également modifier la valeur de spinner à l’aide du bouton fléché du clavier. Dans ce cas, je trouve que l'événement keyup est plus robuste que l'événement change:

$(document).ready(function(){
    var range_spinner = $('.spinner').spinner(); 

    // hack to trigger input keyup whenever spinner button clicked:
    $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); });   

    // keyup will catch any stroke on keyboard
    $('#range').keyup(function(){
       console.log(range_spinner.spinner('value')); 
    });
});
0
goFrendiAsgard