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

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。

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

动态更改jquery移动颜色样本

Answer 4

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

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

Answer 5

以此为例：

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

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

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

问题描述

5 个解决方案

解决方案1
5 已采纳 2012-03-08 17:48:38

解决方案2
3 2014-01-06 07:52:27

解决方案3
2 2012-03-08 17:19:35

解决方案4
1 2012-06-02 19:01:45

解决方案5
1 2012-03-08 15:53:17

如何在jQuery Mobile中动态设置&#39;data-collapsed&#39;和&#39;data-theme&#39;？

问题描述

5 个解决方案

解决方案1 5 已采纳 2012-03-08 17:48:38

解决方案2 3 2014-01-06 07:52:27

解决方案3 2 2012-03-08 17:19:35

解决方案4 1 2012-06-02 19:01:45

解决方案5 1 2012-03-08 15:53:17

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

解决方案1
5 已采纳 2012-03-08 17:48:38

解决方案2
3 2014-01-06 07:52:27

解决方案3
2 2012-03-08 17:19:35

解决方案4
1 2012-06-02 19:01:45

解决方案5
1 2012-03-08 15:53:17