如何在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