Как обновить кнопку в шапке с помощью jQueryMobile? - PullRequest
Новая
       1

Как обновить кнопку в шапке с помощью jQueryMobile?

3 голосов
/ 29 февраля 2012

Я изо всех сил пытался найти способ изменить кнопку в заголовке без потери форматирования. Я хочу изменить кнопку «Удалить» со значком удаления на кнопку «Готово» со значком галочки.

Вот сокращенная версия кода: 

<!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().

Я не могу придумать, что еще можно попробовать.

Ответы [ 3 ]

5 голосов
/ 29 февраля 2012

Делает что-то вроде этой работы:

JS 

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

jQM Документы:

3 голосов
/ 11 апреля 2012

Это простой способ сделать это: 

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

2 голосов
/ 29 февраля 2012

Вы можете изменить виджет, не обновляя его, если вы измените только правильные элементы. 

$('#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 при изменении текста кнопки.

...