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?
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>
You can use,
$(".selector").collapsible( "option", 'collapsed',false );
or
$(".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.net 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.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.
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.
Here is a brief code snippet illustrating how you can accomplish this:
$('#collapseMe').trigger('collapse');
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
