Home/ Questions/Q 7606479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:25:10+00:00

i have a problem in setting the ‘data-theme’ and ‘data-collapsed’ dynamically at run time,

  • 0

i have a problem in setting the ‘data-theme’ and ‘data-collapsed’ dynamically at run time, i used:

$(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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do the with pagebeforecreate event

    Note that by binding to pagebeforecreate, you can manipulate markup
    before jQuery Mobile’s default widgets are auto-initialized. For
    example, say you want to add data-attributes via JavaScript instead of
    in the HTML source, this is the event you’d use.

    Example:

    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>
​
    • 0