Gewusst wie: aktualisieren einer Schaltfläche in einem header mit jQueryMobile?

Ich habe gekämpft, um einen Weg zu finden, um zu ändern, eine Schaltfläche in der Kopfzeile, ohne Verlust der Formatierung. Ich will zu ändern, die Taste Löschen mit dem löschen-Symbol, um die Schaltfläche Fertig mit check-Symbol.

Hier ist eine gekürzte version des Codes:

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

Dies ändert den text des Buttons richtig funktioniert, aber alle die Formatierung verschwindet.

Ich habe versucht, mit trigger('create') sowohl auf dem button und header, die nicht arbeiten, ich habe auch versucht die .page() Methode, die ich lese in einer Antwort an anderer Stelle und ich habe versucht .button() zu.

Ich kann nicht denken an nichts anderes zu versuchen.

InformationsquelleAutor user1228295 | 2012-02-29
  1. 5

    Soetwas macht Arbeit:

    JS

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

    jQM-Docs:

    • Ja, das funktioniert perfekt! Danke.
    • Funktion swapButton() { $('#button').text('Fertig').buttonMarkup({ icon: 'check' }); }
    InformationsquelleAutor Phill Pafford
  2. 3

    Dies ist eine einfache Möglichkeit, es zu tun:

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

    InformationsquelleAutor Claus Parkhoi
  3. 2

    Können Sie ändern Sie die widget-zimmerreserviereung, ohne das Sie es aktualisieren, wenn Sie nur ändern, die richtigen Elemente.

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

    Ist das Ergebnis eine Schaltfläche mit einem anderen icon und text.

    Hier ist eine demo: http://jsfiddle.net/jasper/Pd6au/1/

    Hier ist Ihr code, nachdem es initialisiert durch jQuery Mobile (dies ist nur der button "Löschen"):

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

    Wenn Sie etwas tun, wie: $('#button').text('new text') sind Sie über-schreiben die ganze HTML-Struktur des widgets, das ist, warum es wichtig ist, um das Ziel .ui-btn-text element, wenn die änderung den text der Schaltfläche.

    • Das tut er auch - vielen Dank!
    InformationsquelleAutor Jasper
Schreibe einen Kommentar