Javascript 如何动态设置'；数据折叠'；和'；数据主题&x27；在jquerymobile中动态运行？_Javascript_Jquery_Jquery Mobile

Javascript 如何动态设置'；数据折叠'；和'；数据主题&x27；在jquerymobile中动态运行？

javascript jquery jquery-mobile

Javascript 如何动态设置'；数据折叠'；和'；数据主题&x27；在jquerymobile中动态运行？,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我在运行时动态设置“数据主题”和“数据折叠”时遇到问题，我使用： $(selector).attr('data-collapsed',false) 及但是它不起作用，如何使用jQuery或javascript解决这个问题？举个例子： $(selector).attr('data-theme','b').trigger('create'); 您真的不能仅仅更改data-*属性而期望JQM重新设置页面样式。在大多数情况下，“刷新”用于添加新标记（如添加列表元素）并希望JQM增强这些新项。大多

我在运行时动态设置“数据主题”和“数据折叠”时遇到问题，我使用：

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

及

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

举个例子：

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

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

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

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

我举了一个例子：

您将在JQM中注意到，有时需要知道增强的标记是什么样子，并对其进行操作

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

这个答案有一个很好的例子，展示了如何改变不同元素的主题

您可以使用pagebeforecreate事件执行

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

例如：

HTML


jQuery Mobile：演示和文档
收割台样本A
我是主题内容块设置为“a”的可折叠内容

以下是一段简短的代码片段，说明了如何实现这一点：

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

你可以用

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

或

我假设

不起作用

您的意思是主题没有改变（但是

数据主题

属性很可能正在改变），这就是应该发生的情况。如果您想立即更改小部件的主题，那么需要更改与小部件关联的基于主题的类。您遗漏的一条重要信息是您在何处运行此代码。看起来这可能是一个错误：在jQM文档中，您应该能够设置数据属性，然后触发updatelayout以刷新可折叠文件。我尝试了一系列不同的选项，但无法使其动态更改：

$('#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');
});

<!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>

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

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

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