Блог

Я работаю в jQuery mobile, и это здорово. У меня есть вопрос о предоставлении параметров внутри хэш-части URL-адреса.

Вот несколько примеров кода. В content части домашней страницы я хотел бы иметь возможность ссылаться на страницу с именем, например, ‘#photo-123’, и загружать страницу с «фото» ниже. Затем я бы извлек номер фотографии из URL-адреса и загрузил изображение 123.

   <!-- Home page -->
    <div data-role="page" id="home"> 
        <div data-role="header">
            <h1>Home</h1> 
        </div> 
        <div data-role="content">    
            <p><a href="#photo" data-role="button">Photo ###</a></p>  
        </div> 
    </div> 
    <!-- Photo page -->
    <div data-role="page" id="photo">
        <div data-role="header">
            <h1>Photo ###</h1>
        </div>
        <div data-role="content">
              <img id="myphoto" src="" />
        </div>
    </div>
  

Это для того, чтобы я мог повторно использовать URL-адрес, то есть пользователь может перезагрузить эту страницу напрямую.

Возможно ли передавать параметры внутри URL-хэша с помощью jQuery mobile? (или вообще с HTML в целом — я знаю, что это возможно, например, с плагином BBQ, но я бы предпочел избегать плагинов, если это возможно)

Вы можете использовать глобальные перехватчики событий и теги данных для обработки и сохранения параметров для внутренних (т. Е. между #blah -> #blah2) переходов:

1. В вашем HTML вы можете перейти

   < a href=»#photo» data-params=»id=123″>….< / a>

2. Перехватывайте клики по всем ссылкам и ищите конкретный элемент данных, скажем, data-params:

    $('a').live('click',
       function(e) {
           params = $(e.target).jqmData("params")
       }
   )
     

В этом случае вы создаете глобальный объект params, к которому вы должны иметь единый доступ из всего вашего кода.

Если вы можете структурировать свои хэши как #photo?id = 123, что-то вроде этого может сработать:

 $("#page").live("pageinit", function(e) {
    var id = $(e.target).attr("data-url").replace(/.*id=/, "");
    //now you have the id, do page-rendering logic
});
  

И перехватывать прямые ссылки:

 if (window.location.hash amp;amp; window.location.hash.indexOf("?") !== -1) {
    var pageID = window.location.hash.split("?")[0];
    $(pageID).trigger("pageinit");
}
  

вы хотите использовать .changPage() функцию

 $("[name=button_name]").click(function() { 
    $.mobile.changePage('anotherPage.php?parm=123','slide',false,true);
});
  

Вы могли бы сделать что-то вроде этого:

 $('#photo').ready(function () {
    var photoId = window.location.hash.replace("#photo", "");
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/"   photoId);
    window.location.hash = "#photo";
});
  

Это заставит jQuery перейти на #photo страницу, однако сначала необходимо остановить попытку загрузки jQuery mobile #photofff . В конечном итоге это приводит к быстрому отображению на странице сообщения об ошибке при загрузке страницы, а затем перенаправлению на исправленный тег #hash.

Обновить
Если вы отключите отслеживание хэша на этой странице, вы сможете удалить отображение сообщения об ошибке.

 <script type="text/javascript">
    $.mobile.hashListeningEnabled = false;
</script>

$('#photo').ready(function () {
    var photoId = window.location.hash.replace("#photo", "");
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/"   photoId);
    $.mobile.changePage("#photo");
});
  

Проверьте это исправление:

https://github.com/flodev/jquery-mobile/commit/f3b2e5d84493f3b8b27f9f423863cab2a416007a

Была похожая проблема, но добавление этой строки кода в jquery.mobile js-файл позволило мне передавать параметры в URL-адресе без необходимости добавлять плагины и решения для маршрутизации js.