Question

我在运行时动态设置'data-theme'和'data-collapsed'时出现问题，我用过：

$(selector).attr('data-collapsed',false)

和

$(selector).attr('data-theme',b)

但它不起作用，如何使用jQuery或javascript解决这个问题？

Answer 1

您可以使用pagebeforecreate事件

http://jquerymobile.com/test/docs/api/events.html

请注意，通过绑定到pagebeforecreate，您可以操作标记在jQuery Mobile的默认小部件自动初始化之前。对于例如，假设您想通过JavaScript而不是添加数据属性在HTML源代码中，这是您使用的事件。

示例：

http://jsfiddle.net/ayEWB/

JS

$('#home').live('pagebeforecreate',function(event) {
    var col = $('#collapseMe');

    // Alternative settings
    //col.attr('data-collapsed','false');
    //col.attr('data-theme','b');

    col.data('collapsed',false);
    col.data('theme','b');
});

HTML

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile: Demos and Documentation</title>
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />

    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="collapsible" data-theme="a" data-content-theme="a" id="collapseMe">
           <h3>Header swatch A</h3>
           <p>I'm the collapsible content with a themed content block set to "A".</p>
        </div>
    </div>
</div>
</body>
</html>

Answer 2

你可以使用，

$(".selector").collapsible( "option", 'collapsed',false );

或

$(".selector").collapsible({ collapsed: false });

Answer 3

您真的不能只是更改data- *属性并期望JQM重新设置您的页面。在大多数情况下，当您添加新标记（如添加列表元素）并希望JQM增强这些新项目时，会使用“刷新”。大多数表单元素小部件都有一个类似.checkboxradio（）的方法来更新底层本机控件的增强标记。也就是说，如果以编程方式更改所选单选按钮，则需要调用.checkboxradio（'refresh'），以便更新增强版本。

顺便说一句：你真的应该学习如何使用jsfiddle.net，以便人们可以看到你尝试过的东西。回应“它不起作用！”没有帮助，因为我们无法判断您是否正确应用了解决方案，或者特定标记是否导致问题。您应该创建最简单的标记和javascript来识别您的问题。这将有助于每个人在极大地帮助你。

无论如何，我已经创建了一个用于以编程方式折叠/展开可折叠的样本。正如您所知，这只是触发可折叠的展开/折叠事件的问题。 JQM没有提供一种方法来确定它是否已折叠，因此您还必须查看特定类是否存在。

我在这里有一个例子：http://jsfiddle.net/kiliman/pEWJz/

$('#page').bind('pageinit', function(e, data) {
    // initialize page
    var $page = $(this);
    $('#toggle-collapsible').click(function() {
        var $collapsible = $('#collapsible'),
            isCollapsed = $collapsible.find('.ui-collapsible-heading-collapsed').length > 0;

        $collapsible.trigger(isCollapsed ? 'expand' : 'collapse');
    });
});

你会在JQM中注意到你有时需要知道增强型标记的样子并对其进行操作。

例如，一旦页面增强，目前无法动态更改主题。您基本上必须去替换所有类以使用正确的主题。例如，将.ui-body-c更改为.ui-body-e。

这个答案有一个很好的例子，展示了如何更改各种元素的主题。

change jquery mobile color swatch dynamically

Answer 4

使用它，例如：

$(selector).attr('data-theme','b').trigger('create');

http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-scripting.html

Answer 5

以下是一个简短的代码段，说明如何完成此任务：

$('#collapseMe').trigger('collapse');

如何在jQuery Mobile中动态设置'data-collapsed'和'data-theme'？

5 个答案: