javascript 如何在 jQuery Mobile 中动态设置“数据折叠”和“数据主题”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9620512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to dynamically set the ' data-collapsed' and 'data-theme' dynamically in jQuery Mobile?
提问by Java Player
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?
但它不起作用，如何使用jQuery或javascript解决这个问题？
回答by Phill Pafford
You can do the with pagebeforecreate event
您可以使用 pagebeforecreate 事件进行
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.
请注意，通过绑定到 pagebeforecreate，您可以在 jQuery Mobile 的默认小部件自动初始化之前操作标记。例如，假设您想通过 JavaScript 而不是在 HTML 源代码中添加数据属性，这就是您要使用的事件。
Example:
例子：
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>
?
回答by Sathesh
You can use,
您可以使用，
$(".selector").collapsible( "option", 'collapsed',false );
or
或者
$(".selector").collapsible({ collapsed: false });
回答by Kiliman
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.
您真的不能仅仅更改 data-* 属性并期望 JQM 重新设计您的页面。大多数情况下，当您添加新标记（如添加列表元素）并希望 JQM 增强这些新项目时，会使用“刷新”。大多数表单元素小部件都有一个类似 .checkboxradio() 的方法来更新底层原生控件的增强标记。也就是说，如果您以编程方式更改选定的单选按钮，则需要调用 .checkboxradio('refresh') 以便它更新增强版本。
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.
顺便说一句：您真的应该学习如何使用 jsfiddle.net，这样人们才能看到您的尝试。回应“它不起作用！” 没有帮助，因为我们无法判断您是否正确应用了解决方案，或者特定标记是否导致问题。您应该创建最简单的标记和 javascript 来识别您的问题。这将极大地帮助每个人为您提供帮助。
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.
这个答案有一个很好的例子，展示了如何更改各种元素的主题。
回答by JensT
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
回答by John Mills
Here is a brief code snippet illustrating how you can accomplish this:
这是一个简短的代码片段，说明如何完成此操作：
$('#collapseMe').trigger('collapse');
