Question

我正在尝试在jquery mobile 1.4.0的表中使用jquery ui微调器

<div class="table_data">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th>Address</th>
            <th>Doorbells</th>
            <th>Mailboxes</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <input type="text" class="spinner" name="doorbells"/>
            </td>
            <td>
                <input type="text" class="spinner" name="mailboxes"/>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <input type="text" class="spinner" name="doorbells"/>
            </td>
            <td>
                <input type="text" class="spinner" name="mailboxes"/>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <input type="text" class="spinner" name="doorbells"/>
            </td>
            <td>
                <input type="text" class="spinner" name="mailboxes"/>
            </td>
        </tr>
    </tbody>
</table>
</div>
<script>
     $( ".spinner" ).spinner();
</script>

在下面的jsfiddle链接中，您可以看到我的问题。按钮没有显示在正确的位置，甚至不再工作。

http://jsfiddle.net/murtho/ZZqu6/5/

当我不包含jquery ui js和css文件时，微调工作正常。我需要移动ui用于我的应用程序中的其他功能，但我也希望实现jquery微调器（替代解决方案）

这是它应该如何运作：

http://jsfiddle.net/murtho/tf89L/2/

Answer 1

jQuery UI和jQuery mobile不能很好地协同发挥。

对于您的数字微调器，您可以使用一行额外代码修复格式，以从微调器按钮div中删除jQM类：

$(document).on("pagebeforeshow", "#page1", function(){
    $( ".spinner" ).spinner();
    $(".ui-spinner div" ).removeClass(function() {
      return $( this ).attr( "class" );
    });
});

以下是您更新的 FIDDLE

另一种选择是在输入框上设置type =“number”;但是，并非所有浏览器都能理解这一点。

您需要查看jQuery UI是否会导致您的特定应用程序出现任何其他问题......

jquery ui spinner与jquery mobile发生故障

1 个答案: