Question

我一直在努力寻找一种方法来更改标题中的按钮而不会丢失格式。我想将带有删除图标的删除按钮更改为带有复选图标的完成按钮。

以下是代码的缩写版本：

<!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()方法，我在其他地方的答案中读到了{I}}我试过了{{} 1}}。

我想不出任何其他事情可以尝试。

Answer 1

这样的事情是否有效：

http://jsfiddle.net/u8fnJ/1/

JS

function swapButton() {
    var b = $('#button');
    b.text('Done');
    b.buttonMarkup({ icon: "check" });
    b.button('refresh');
}

jQM文档：

Answer 2

这是一种简单的方法：

<div data-role="header">
    <h1>Test Page</h1>
    <a class="button ui-btn-left" data-icon="delete">Delete</a>
    <a class="button ui-btn-left" data-icon="check" style="display:none">Done</a>
</div>

$("a.button").click(function(){
    $("a.button").hide().eq(1).show();
});

http://jsfiddle.net/clausparkhoi/p6ZzN/3/

Answer 3

如果只更改正确的元素，则可以更改窗口小部件而无需刷新窗口。

$('#button').click(function () {

    //1. change the `data-icon` attribute of the link element
    //2. then find the `.ui-icon` element and remove the "delete" icon class, then add the "check" icon class
    //3. then traverse to the `.ui-btn-text` element (a sibling of the `.ui-icon` element) and change the text of the element there
    $(this).attr('data-icon', 'check').find('.ui-icon').removeClass('ui-icon-delete').addClass('ui-icon-check').prev().text('New Text!');
});

这将产生一个带有不同图标和文字的按钮。

以下是演示：http://jsfiddle.net/jasper/Pd6au/1/

这是jQuery Mobile初始化后的代码（这只是“删除”按钮）：

<a data-icon="delete" id="button" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Delete</span>
        <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
    </span>
</a>

当您执行类似：$('#button').text('new text')之类的操作时，您正在覆盖窗口小部件的整个HTML结构，这就是更改按钮文本时定位.ui-btn-text元素的重要原因。 / p>

如何使用jQueryMobile刷新标题中的按钮？

3 个答案: