javascript - how to dynamically set the ' data-collapsed' and 'data-theme' dynamically in jQuery

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?

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 Improve this question edited Mar 8, 2012 at 15:58 talnicolas 14.1k7 gold badges37 silver badges56 bronze badges asked Mar 8, 2012 at 15:48 Eslam Hamdy 7,39627 gold badges107 silver badges167 bronze badges

I'm assuming by doesn't work you mean that the theme doesn't change (but the data-theme attribute most likely is changing), which is what should happen. If you want to instantly change the theme of a widget then you need to change the theme-based classes associated with the widget. An important piece of info you left-out is where you run this code. – Jasper Commented Mar 8, 2012 at 18:25
Looks like this might be a bug: github./jquery/jquery-mobile/issues/3771 in the jQM docs you should be able to set the data attributes and then trigger updatelayout jquerymobile./test/docs/api/events.html to refresh the collapsible I tried a bunch of different options and could not get it to dynamically change: jsfiddle/ayEWB/3 – Phill Pafford Commented Mar 8, 2012 at 18:42

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

You can do the with pagebeforecreate event

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

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:

http://jsfiddle/ayEWB/

$('#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./test/css/themes/default/jquery.mobile.css" />

    <script src="http://jquerymobile./test/js/jquery.js"></script>
    <script src="http://jquerymobile./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>

You can use,

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

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

You really can't just change the data-* attribute and expect JQM to restyle your page. For the most part, 'refresh' is used when you add new markup (like adding list elements) and want JQM to enhance those new items. Most form element widgets have a method like .checkboxradio() to update the enhanced markup from the underlying native controls. That is, if you change the selected radio button programmatically, you need to call .checkboxradio('refresh') so it will update the enhanced version.

BTW: You really should learn how to use jsfiddle so people can see what you've tried. 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. 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.

I have an example here: http://jsfiddle/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.

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.

This answer has a great example that shows how to change the themes on various elements.

change jquery mobile color swatch dynamically

use this for example:

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

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

Here is a brief code snippet illustrating how you can acplish this:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to dynamically set the ' data-collapsed' and 'data-theme' dynamically in jQuery

5 Answers 5

与本文相关的文章

评论列表(0)