jQuery Mobile - диалоги без изменения хэша - PullRequest
Новая
       16

jQuery Mobile - диалоги без изменения хэша

2 голосов
/ 14 октября 2011

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

$.mobile.changePage(dialog, { transition: "slide", changeHash: false });

и закрываем его 

dialog.dialog('close');

Однако в некоторых случаях (при переходе на страницу) закрытие диалогового окна обновляет текущую страницу.

Есть ли лучший способ взаимодействия с этим?

Обновление:

Кажется, я понял, что происходит. Поэтому по какой-то причине jquery mobile обычно хранит в DOM 2 страницы, одна из которых невидима, чтобы убедиться в этом, запустив в консоли $ ('[data-role = page]'). Одна страница - это страница, на которой вы находитесь, а другая - страница, на которую вы изначально перешли. Не совсем уверен, почему они решили это сделать, но там у вас есть.

Таким образом, они рассматривают диалоги как навигацию по страницам с другим переходом, даже если диалог уже находится в DOM. Поэтому, если вы идете прямо на страницу и затем запускаете диалоговое окно, изменение текущей страницы и ее закрытие работает нормально - потому что исходная страница всегда загружается в DOM. Однако, если вы переходите на другую страницу, затем перейдите на страницу, которая вызывает диалоговое окно, и, затем, откройте диалоговое окно, он уничтожит текущую страницу, так что страницы в DOM будут начальной и диалоговым. В этом случае он полностью перезагружает страницу запуска диалога, и у вас никогда не будет возможности внести какие-либо изменения.

Jeez. Как мне напрямую взаимодействовать с виджетом диалога jqm?

Ответы [ 3 ]

1 голос
/ 15 октября 2011

Вы можете попробовать две другие вещи. Оба должны работать:

1 комплект DomChache
Как насчет переопределения JQM, чтобы сохранить страницу, с которой вы запускаете диалог в DOM? В документах сказано, что вы можете установить <a href="http://jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html" rel="nofollow">data-dom-chache</a> и отменить очистку страницы из DOM.

Если это происходит только тогда, когда вы загружаете эту страницу через AJAX (вместо загрузки напрямую), вы можете сделать сохранение DOM зависимым от вашей страницы триггера, имеющей data-page-external, назначать DOM-chache = "true" только тогда, когда диалоговое окно является openend и удалите его снова после закрытия диалога.

2 переопределить JQM
У меня была та же проблема, которую вы описали, и она работала так (требуется взлом JQM ...): 

// inside transitionPages function
if ( !$(toPage).jqmData('internal-page') 
    {fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
    }

Моя проблема заключалась в том, что при переходе на определенные страницы (аналогично диалогу) предыдущая страница (с которой запускался диалог) была удалена из DOM, поэтому у меня был пустой экран (при попытке вернуться назад). Я добавил data-internal-page = "true" на страницы, которые должны сохранить предыдущую страницу без изменений, и добавил условие if в JQM.

Так что теперь pageHide (и DOMcleanup) срабатывает только, если я не иду на страницу, помеченную data-internal-page="true"

Ура!

1 голос
/ 30 ноября 2011

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

Я мог заставить его появляться при загрузке с помощью load или событий pagehow, но когда я щелкнул close, который вернул вас на предыдущую страницу в истории, вместо того, чтобы просто закрыть диалоговое окно. 

//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"

$('#success').live('pageshow',function(){
    window.setTimeout(function(){
        $.mobile.changePage('#dialog','pop',false,false);
    },1);
}

Это взлом, и он позволяет загрузке страницы опережать диалог, поэтому он застревает в истории. Тогда стандартное поведение закрытия диалогового окна для диалога работает как положено. Разговор о PITA, если бы они взяли немного больше для диалога JQuery UI, это сделало бы вещи намного проще.

0 голосов
/ 15 октября 2011

А что касается вашего вопроса: смотрели ли вы на плагин Jquery Mobile Actionsheet

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

Также полезным может быть Cagintranet iPad popover , хотя на мобильных устройствах необходимо настроить дизайн на весь экран.Если вам требуется CSS / Jquery, дайте мне знать (я использую это в плагине JQM, который пишу)

Надеюсь, это поможет.

...