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

#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. Согласен. Смотрите другие предложения ниже.