jQuery ui.spinner.js全局微调器

时间:2012-05-11 16:42:03

标签: jquery input html-table spinner

我正在使用jQuery微调器将+/-值添加到我在mysql数据库传播的表中的输入字段中。

我想将列顶部的+/-集成到该列中每个输入的+/- 1,以及每个输入都有自己的按钮。

我为jQuery尝试了以下内容:

<script type="text/javascript" src="js/ui.spinner.js"></script>
<script type="text/javascript">
    jQuery().ready(function($) {
        $('.spinner').spinner({ min: 0, max: 100 });
        $('#spinnerall').spinner().change(function() {$('.spinner').spinner('option', 'max', parseInt($(this).val()));});
        $('#spinnerall').spinner().change(function() {$('.spinner').spinner('option', 'min', parseInt($(this).val()));});
    });
</script>

然后这是表格代码:

<td><input type='text' class='spinner' value='$max' /></td>
<input type='text' id='spinnerall' />

“spinnerall”实际上并不需要作为输入,但我无论如何都无法弄清楚。否则就称之为。

使用上面使用的代码的spinnerall输入,将所有输入重置为与当前相同的值相同,而不是仅添加或减去1。

1 个答案:

答案 0 :(得分:2)

如果我能理解这个问题,答案应该是这样的:

<script type="text/javascript" src="js/ui.spinner.js"></script>
<script type="text/javascript">
$(function(){
    var $sa = $('#spinnerall').spinner().change(function() {
        var $me = $(this);
        // we need the offset between the start and current position
        var offset = parseInt($me.attr('data-init')) - parseInt($me.val());
        $ss.each(function(){
            // applying the offset to all spinners
            this.value = parseInt($(this).attr('data-init')) - offset;
            // allow only positive or zero
            this.value *= (this.value > 0);
        })
    });
    $sa.attr('data-init',$sa.val());

    var $ss = $('.spinner').spinner({ min: 0, max: 100 }).change(function(){
        var $me = $(this);
        // replacing the initial value with the current (without the offset)
        $me.attr('data-init',parseInt($me.val()) - parseInt($sa.attr('data-init')) - parseInt($sa.val()));
    }).change();
});
</script>

我用这个标记测试了它:

<input type="text" class="spinner" value="1" /><br/>
<input type="text" class="spinner" value="-5" /><br/>
<input type="text" class="spinner" value="7" /><br/><br/>
<input type='text' id='spinnerall' value="0" />

以下是jsfiddle.net

中的示例