如何使用jQueryMobile刷新标题中的按钮? [英] How to refresh a button in a header with jQueryMobile?
问题描述
我一直在努力寻找一种方法来更改标题中的按钮而不丢失格式.我想将带有删除图标的删除"按钮更改为带有选中图标的完成"按钮.
以下是该代码的简化版本:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
function swapButton() {
$('#button').attr('data-icon', 'check').text('Done').trigger('create');
$('#header').trigger('create');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" id="header">
<a data-icon="delete" id="button" onclick="swapButton()">Delete</a>
<h1>Test Page</h1>
</div>
<div data-role="content">
<p>Click on Delete to get Done button</p>
</div>
</div>
</body>
</html>
这会正确更改按钮的文本，但所有格式都会消失.
我已经尝试在按钮和标题上都使用trigger('create')，但都没有用，我还尝试了.page()方法，该方法在其他地方的答案中得到了理解，我也尝试了.button(). /p>
我想不出要尝试的其他方式了.
执行以下操作:
JS
function swapButton() {
var b = $('#button');
b.text('Done');
b.buttonMarkup({ icon: "check" });
b.button('refresh');
}
jQM文档:
- http://jquerymobile.com/demos/1.0. 1/docs/buttons/buttons-methods.html
- http://jquerymobile.com/demos/1.0. 1/docs/buttons/buttons-options.html
I've been struggling to find a way to change a button in the header without losing the formatting. I want to change the Delete button with delete icon to a Done button with check icon.
Here's a shortened version of the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
function swapButton() {
$('#button').attr('data-icon', 'check').text('Done').trigger('create');
$('#header').trigger('create');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" id="header">
<a data-icon="delete" id="button" onclick="swapButton()">Delete</a>
<h1>Test Page</h1>
</div>
<div data-role="content">
<p>Click on Delete to get Done button</p>
</div>
</div>
</body>
</html>
This changes the text of the button properly but all the formatting disappears.
I've tried using trigger('create') on both the button and the header which doesn't work, I've also tried the .page() method which I read in an answer elsewhere and I tried .button() too.
I can't think of anything else to try.
Does something like this work:
JS
function swapButton() {
var b = $('#button');
b.text('Done');
b.buttonMarkup({ icon: "check" });
b.button('refresh');
}
jQM Docs:
- http://jquerymobile.com/demos/1.0.1/docs/buttons/buttons-methods.html
- http://jquerymobile.com/demos/1.0.1/docs/buttons/buttons-options.html
这篇关于如何使用jQueryMobile刷新标题中的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
