JQuery Mobile 1.0: как улучшить страницу более одного раза - PullRequest
Новая
       0

JQuery Mobile 1.0: как улучшить страницу более одного раза

2 голосов
/ 20 января 2012

jQuery mobile 1.0

Я изменяю содержание страницы, проще говоря: 

//$page - is enhanced page.
$page.html('<div data-role="header">New Header</div>');
// I what it to be enhanced but $page.page(), $page.trigger('create'), $page.trigger('refresh') is not working

В соответствии с документами page (), использованными один раз, второй раз он игнорируется. Так как же улучшить элементы страницы после добавления динамически?

Я знаю, как улучшить "просмотр списка", но как насчет других элементов?

Ответы [ 3 ]

3 голосов
/ 20 января 2012

Попробуйте 

$('#pageId').trigger('create');

Документы:

Улучшение новой разметки Плагин page отправляет событие pagecreate, которое большинство виджетов используют для автоматической инициализации.До тех пор, пока на скрипт плагина виджета ссылаются, он автоматически улучшит все экземпляры виджетов, которые он найдет на странице.

Однако, если вы генерируете новую разметку на стороне клиента или загружаете контент через Ajax и внедряете егона странице вы можете вызвать событие create для обработки автоинициализации всех плагинов, содержащихся в новой разметке.Это может быть запущено на любом элементе (даже на самом элементе страницы), избавляя вас от необходимости вручную инициализировать каждый плагин (кнопка просмотра списка, выбор и т. Д.).

Например, если блок разметки HTML (скажем, форма входа в систему) была загружена через Ajax, вызвать событие create, чтобы автоматически преобразовать все содержащиеся в нем виджеты (в данном случае входы и кнопки) в расширенные версии.Код для этого сценария будет выглядеть следующим образом: 

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Создать против обновления: Важное отличие Обратите внимание, что между созданием события и методом обновления есть важное различие, которое есть у некоторых виджетов.Событие create подходит для улучшения необработанной разметки, содержащей один или несколько виджетов.Метод обновления должен использоваться в существующих (уже улучшенных) виджетах, которыми манипулировали программно и которые необходимо обновить для соответствия пользовательскому интерфейсу.

Например, если у вас была страница, на которой вы динамически добавляли новый неупорядоченный список с помощьюАтрибут data-role=listview после создания страницы, инициирующий создание родительского элемента этого списка, превратил бы его в виджет в виде списка.Если после этого программным способом добавилось больше элементов списка, то при вызове метода обновления представления списка только эти новые элементы списка будут обновлены до расширенного состояния, и существующие элементы списка не будут затронуты.

ОБНОВЛЕНИЕ:

Можете ли вы попробовать это 

$page.html('<div data-role="header">New Header</div>');
$("div:jqmData(role='header')").trigger('create');
2 голосов
/ 09 марта 2013

Поработав с этим сам в течение некоторого времени, я наконец нашел способ обмануть jQuery Mobile в улучшении: 

$('#your-page').data({mobilePage: null}).page();

Вы не найдете этого в документации где-либо, но они проверяют mobilePage, прикрепленный к элементу через .data() jQuery, чтобы увидеть, был ли он уже улучшен или нет.

Я не знаю, будет ли это иметь побочные эффекты. Это не для меня, но я использую магистраль для маршрутизации. Вы можете сначала попытаться сохранить значение mobilePage, затем использовать hack, а затем вернуть mobilePage.

Другой вариант, который я нашел здесь , должен использовать: 

$('#your-page').trigger('pagecreate');

Кто-то прокомментировал, что это приведет к поломке кнопок назад.

Если вы обновляете только раздел содержимого страницы, тогда $('#your-page').trigger('create'); будет работать.

2 голосов
/ 20 января 2012

Как правило, когда вы инициализируете (улучшаете) страницу один раз, вы затем обновляете ее, а не пытаетесь инициализировать ее снова.

Я не пытался улучшить целую страницу сразу, я обычно вызываю метод обновления каждого виджета: 

$('#my-listview-id').listview('refresh');

Так что, возможно, вы можете сделать это и для функции page(): 

$('#my-page-id').page('refresh');

Обновление

Я нашел это в документах для динамически создаваемых страниц (http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html):

    // Pages are lazily enhanced. We call page() on the page
    // element to make sure it is always enhanced before we
    // attempt to enhance the listview markup we just injected.
    // Subsequent calls to page() are ignored since a page/widget
    // can only be enhanced once.

Обновление

Так что вы делаете там, переписывая все стили jQuery Mobile, но вам не обязательно это делать. Используя инструменты разработчика, проверьте структуру HTML инициализированного виджета заголовка (или любого другого виджета, который вы хотите обновить). Структура HTML будет другой, и вы сможете настраивать определенные элементы для обновления таких вещей, как: текст, значки, тени и т. Д.

Вот пример виджета jQuery Mobile Header после инициализации: 

<div data-role="header" data-theme="f" class="ui-header ui-bar-f" role="banner">
    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Content formatting</h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home ui-btn ui-btn-up-f ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="Home" data-theme="f">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
            <span class="ui-btn-text">Home</span>
            <span class="ui-icon ui-icon-home ui-icon-shadow"></span>
        </span>
    </a>
</div>

Обратите внимание, что если вы хотите обновить значок кнопки или ее текст, вы можете настроить таргетинг на .ui-icon или .ui-btn-text внутри виджета Button: $('.ui-header').children('.ui-btn').find('.ui-text').text('my new button text').

...