#dialog #jquery-mobile
#диалог #jquery-mobile
Вопрос:
У меня есть диалоговое окно поиска, которое я открываю и заполняю шаблонами jquery. После того, как они делают выбор, я устанавливаю значение на текущей странице. Таким образом, мне не нужны хэштеги или что-то в этом роде, мне просто нужно всплывающее диалоговое окно, которое я могу открывать и закрывать программно. В настоящее время я открываю диалоговое окно с
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
и закрываем его с помощью
dialog.dialog('close');
Однако в определенных случаях (при переходе на страницу) закрытие диалогового окна обновляет текущую страницу.
Есть ли лучший способ взаимодействовать с этим?
Обновить:
Я думаю, я понял, что происходит. Итак, по какой-то причине jquery mobile обычно сохраняет загруженные в DOM 2 страницы, одна из которых невидима, вы можете проверить это, запустив $(‘[data-role=page]’) в консоли. Одна страница — это страница, на которой вы находитесь, другая — страница, на которую вы изначально перешли. Не совсем уверен, почему они решили это сделать, но у вас это есть.
Таким образом, они рассматривают диалоги как навигацию по странице с другим переходом, даже если диалог уже находится в DOM. Поэтому, если вы переходите непосредственно на страницу, а затем запускаете диалоговое окно, изменение текущей страницы и ее закрытие работает нормально — потому что исходная страница всегда загружается в DOM. Однако, если вы перейдете на другую страницу, затем перейдите на страницу, которая запускает диалоговое окно, а ЗАТЕМ запустите диалоговое окно, оно уничтожит текущую страницу, так что страницы в DOM будут начальными и диалоговыми. В этом случае он полностью перезагружает страницу запуска диалогового окна, и у вас никогда не будет возможности внести какие-либо изменения.
Боже. Как мне напрямую взаимодействовать с виджетом диалогового окна jqm?
Комментарии:
1. Что касается вашего обновления: это имеет большое значение, загружаете ли вы страницу напрямую или переходите на эту страницу с другой страницы. Загруженная страница имеет атрибут data-external-page=»true». Это не упоминается в документах, но именно так страницы различаются. В конечном итоге я делаю некоторые различия специально для этой цели, например, при редактировании элементов CSS.
Ответ №1:
Вы можете попробовать две другие вещи. Оба должны работать:
1 установить DomChache
Как насчет переопределения JQM, чтобы сохранить страницу, с которой вы запускаете диалог, в DOM? В документах говорится, что вы можете установить data-dom-chache
и переопределить очистку страницы из DOM.
Если это происходит только при загрузке этой страницы через AJAX (или при загрузке напрямую), вы можете сделать DOM-сохранение зависимым от наличия вашей триггерной страницы data-page-external
, назначить DOM-chache=»true» только при открытии диалогового окна и снова удалить его после закрытия диалогового окна.
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. вы должны сообщить о своих проблемах на Github / Jquery Mobile, потому что поведение диалога на страницах, загружаемых через Ajax, должно быть таким же, как при прямом вызове страницы.
Ответ №2:
Я думаю, что у меня была похожая проблема. То, что я хотел сделать, было основано на определенных параметрах, открыть диалоговое окно при загрузке (с этим содержимым на той же странице), которое они могут закрыть и просмотреть загруженную страницу.
Я мог бы заставить его всплывать при загрузке, используя load или события pageshow, но когда я нажал закрыть, это отправило вас обратно на предыдущую страницу в истории, вместо того, чтобы просто закрыть диалоговое окно.
//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, это сделало бы все намного проще.
Комментарии:
1. В конечном итоге я только что закончил выходить из фреймворка jqm для этого. Я просто создал свой собственный диалог, используя
$('<div>').css({position: 'absolute'})
и показывал / скрывал его вручную
Ответ №3:
И что касается вашего вопроса: вы смотрели на плагин Jquery Mobile Actionsheet
Если вам действительно не требуется загрузка страницы, все должно быть в порядке.
Также полезным может быть всплывающее окно Cagintranet для iPad, хотя вам нужно настроить дизайн, чтобы он был полноэкранным на мобильных устройствах. Если для этого вам требуется CSS / Jquery, дайте мне знать (я использую это в плагине JQM, который я пишу)
Надеюсь, это поможет.
Комментарии:
1. Я попробовал плагин jqm simpledialog, но он работает с шаблонами, когда фактически размещен на мобильном устройстве. Я действительно хочу использовать стандартный виджет диалогового окна, потому что я знаю, что это работает (и я уже переключился на него)
2. Согласен. Смотрите другие предложения ниже.