Question

为什么主题'e'没有反映在输出中？

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <title>title</title>

        <script>
            $(document).bind('pageinit', function() {
                $('input').attr('data-theme', 'e');
            });
        </script>

    </head>

    <body>

        <input type="text" />

    </body>
</html>

Answer 1

由于.textinput不适用于refresh或create，因此这是一种简单的方法。

$('input').closest('div').removeClass('ui-body-c');
$('input').closest('div').addClass('ui-body-e');

输入的默认主题为c，因此您将其从父div中删除并添加主题e。但是，textinput仍会有ui-body-c类，但ui-body-e会在将其添加到父div时覆盖它。

<强> Demo

Answer 2

您可能需要触发刷新。

$('input').attr('data-theme', 'e').trigger('refresh');

Answer 3

似乎没有直接而简单的方法来做到这一点。

Omar提出了一个有效的解决方案，但这取决于JQM呈现组件的方式。如果JQM的未来版本更改了渲染模型，则这可能不适用。

为什么我们不能考虑更换组件本身？（如下所示）

$('selector').html('<input type="text" data-theme="e"/>').trigger('create');

如果您的组件具有许多属性，则此方法可能有点奇怪，但它似乎可靠且适用于您希望动态更改的任何JQM组件。

以编程方式更改Jquery Mobile组件中的主题

3 个答案: