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

Question

i have a problem in setting the 'data-theme' and 'data-collapsed' dynamically at run time, i used: 我在运行时动态设置'data-theme'和'data-collapsed'时遇到问题，我用过：

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

and 和

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

but it doesn't work, how to solve this problem using jQuery or javascript? 但它不起作用，如何使用jQuery或javascript解决这个问题？

Answer 1

You can do the with pagebeforecreate event 你可以使用pagebeforecreate事件

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

Note that by binding to pagebeforecreate, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. 请注意，通过绑定到pagebeforecreate，您可以在jQuery Mobile的默认窗口小部件自动初始化之前操作标记。 For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use. 例如，假设您要通过JavaScript而不是HTML源添加数据属性，这就是您要使用的事件。

Example: 例：

http://jsfiddle.net/ayEWB/ http://jsfiddle.net/ayEWB/

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

You can use, 您可以使用，

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

or 要么

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

Answer 3

You really can't just change the data-* attribute and expect JQM to restyle your page. 您真的不能只是更改data- *属性并期望JQM重新设置您的页面。 For the most part, 'refresh' is used when you add new markup (like adding list elements) and want JQM to enhance those new items. 在大多数情况下，当您添加新标记（如添加列表元素）并希望JQM增强这些新项目时，会使用“刷新”。 Most form element widgets have a method like .checkboxradio() to update the enhanced markup from the underlying native controls. 大多数表单元素小部件都有一个类似.checkboxradio（）的方法来更新底层本机控件的增强标记。 That is, if you change the selected radio button programmatically, you need to call .checkboxradio('refresh') so it will update the enhanced version. 也就是说，如果以编程方式更改所选单选按钮，则需要调用.checkboxradio（'refresh'），以便更新增强版本。

BTW: You really should learn how to use jsfiddle.net so people can see what you've tried. 顺便说一句：你真的应该学习如何使用jsfiddle.net，以便人们可以看到你尝试过的东西。 Responding with 'it doesn't work!' 回应“它不起作用！” doesn't help, since we can't tell if you've applied the solution properly or if particular markup is causing issues. 没有帮助，因为我们无法判断您是否正确应用了解决方案，或者特定标记是否导致问题。 You should create the simplest markup and javascript to identify your problem. 您应该创建最简单的标记和javascript来识别您的问题。 That will help everyone out immensely in assisting you. 这将有助于每个人在极大地帮助你。

Anyway, I've created a sample for programmatically collapsing/expanding a collapsible. 无论如何，我已经创建了一个以编程方式折叠/展开可折叠的样本。 As you can tell, it's simply a matter of triggering the expand/collapse event on the collapsible. 正如您所知，这只是触发可折叠的展开/折叠事件的问题。 JQM doesn't provide a way to find out if it's collapsed or not, so you have to look too see if a specific class exists. JQM没有提供一种方法来确定它是否已折叠，因此您必须查看是否存在特定类。

I have an example here: http://jsfiddle.net/kiliman/pEWJz/ 我在这里有一个例子： 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');
    });
});

You'll notice a lot in JQM that you will sometimes need to know what the enhanced markup looks like and manipulate that. 你会在JQM中注意到你有时需要知道增强的标记是什么样的并且操纵它。

For example, there is currently no way to dynamically change the theme once a page is enhanced. 例如，一旦页面增强，目前无法动态更改主题。 You will basically have to go and replace all the classes to use the correct theme. 您基本上必须去替换所有类以使用正确的主题。 For example, change .ui-body-c to .ui-body-e. 例如，将.ui-body-c更改为.ui-body-e。

This answer has a great example that shows how to change the themes on various elements. 这个答案有一个很好的例子，展示了如何更改各种元素的主题。

change jquery mobile color swatch dynamically 动态更改jquery移动颜色样本

Answer 4

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

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

Answer 5

use this for example: 以此为例：

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

http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-scripting.html 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