jQueryMobileでヘッダ内のボタンを更新するには？

私は、書式設定を失うことなく、ヘッダー内のボタンを変更する方法を見つけるのに苦労してきました。削除アイコンで削除ボタンをチェックアイコン付きの完了ボタンに変更したい。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>

これは、適切に、ボタンのテキストを変更しますが、すべての書式が消える：

は、ここでは、コードの短縮版です。

ボタンとヘッダーの両方で動作しないと私は試しましたが、他の場所で答えを読むのに.page()メソッドを試しましたが、.button()も試しました。

私は他に何か試みることはできません。

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

jQMドキュメント

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

JS：

出典

2012-02-29 user1228295

は、この作品のような何かをする

出典

2012-02-29 00:34:15

はい、完璧に動作します！ありがとうございました。 – user1228295

function swapButton（）{ $（ '＃button'）。テキスト（ '完了'）。buttonMarkup（{アイコン： 'チェック'}）; } – user1228295

あなたが唯一の正しい要素を変更した場合、それを更新することなく、ウィジェットを変更することができます。

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

これにより、アイコンとテキストが異なるボタンになります。ここで

はデモです：それはjQueryのモバイルで初期化されます後にここでhttp://jsfiddle.net/jasper/Pd6au/1/

は、あなたのコードは、（これは単にボタンを「削除」された）である。

<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要素をターゲットにすることが重要です。

出典

2012-02-29 00:45:34 Jasper

それもそうです - ありがとう！ – user1228295

これはそれを行うための簡単な方法です：

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

出典

2012-04-10 20:13:13

jQueryMobileでヘッダ内のボタンを更新するには？

答えて

関連する問題