How to refresh a button in a header with jQueryMobile?

问题

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.

回答1:

Does something like this work:

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

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

回答2:

This is an easy way of doing it:

<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/

回答3:

You can alter the widget without having to refresh it if you only alter the correct elements.

$('#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!');
});

This will result in a button with a different icon and text.

Here is a demo: http://jsfiddle.net/jasper/Pd6au/1/

Here is your code after it's initialized by jQuery Mobile (this is just the "Delete" button):

<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>

When you do something like: $('#button').text('new text'), you are over-writing the whole HTML structure of the widget, that's why it's important to target the .ui-btn-text element when changing the text of a button.

来源：https://stackoverflow.com/questions/9491879/how-to-refresh-a-button-in-a-header-with-jquerymobile

标签

jquery-mobile