wake-up-neo.com

jquery.ui.spinner ändern

Ich versuche, die neueste Version von jquery.ui.spinner.js zu verwenden. http://wiki.jqueryui.com/w/page/12138077/Spinner

Die Spinner zeigen und aktualisieren die Textboxen, aber ich habe Schwierigkeiten, herauszufinden, wie das Änderungsereignis erfasst werden kann. Es wird ausgelöst, wenn Sie den Wert im Textfeld manuell ändern, nicht aber, wenn Sie die Drehpfeile verwenden.

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]" />
20
etriad

Hängen Sie ein Ereignis an die Drehfeldsteuerelemente an, das change() in Ihrem Textfeld aufruft.

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

jsFiddle .

Nach dem Einrichten des Spinners.

35
alex

Ich denke, das ist was du brauchst:

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

Im Gegensatz zur Bindung an das click-Ereignis der Schaltflächen erkennt dies auch die Verwendung der Auf/Ab-Tasten der Tastatur.

Weitere Informationen und weitere Ereignisse finden Sie auf dieser Seite: http://api.jqueryui.com/spinner/#entry-examples

18

Es gibt kein "change" -Ereignis, stattdessen "spinstop" -Ereignis:

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

Die Dokumentation schlägt auch spinchange event vor, aber für mich ist es ein bisschen langweilig.

Ressource: http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner%2Fspinner%26redirect%3Dno#event -Veränderung

8
Arman Bimatov

Nun, eigentlich würde ich Änderungen durch Standard-Änderungsereignisse leiten und so alles festhalten:

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

Dies gibt mir die flüssigsten Ergebnisse:

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

Ich weiß, dass diese Frage bereits beantwortet wurde. Aber ich hoffe, dass dies anderen helfen wird.

Neben der manuellen Bearbeitung des Wertes und der Pfeilschaltfläche des Drehfelds können Sie auch den Wert des Drehfelds mithilfe der Pfeiltasten auf der Tastatur bearbeiten. In diesem Fall finde ich, dass keyup event robuster ist als change event:

$(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