Динамическая JQuery Мобильная связь

У меня проблема с jQuery и динамическая обработка URL-адресов. Я хотел бы сделать это, если у меня есть страница со ссылками, и у каждого из них есть идентификатор для вызова функции и идентификатора. Как я могу изменить URL-адрес для конкретной ссылки и использовать этот URL-адрес в качестве закладки. Ниже мой кодДинамическая JQuery Мобильная связь

<div data-role="page" id="#listview"> 
<div data-role="header"> 
    <h1>List</h1> 
</div> 

<div data-role="content"> 
<ul data-role="listview" id="carlist"> 
    <li><a href="#" onclick="cardetails('1')">Acura</a></li> 
    <li><a href="#" onclick="cardetails('2')>Audi</a></li> 
    <li><a href="#" onclick="cardetails('3')>BMW</a></li> 
</ul> 
</div> 

<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div>

Итак, когда вы нажимаете на автомобиле в списке функцию с именем cardetails с параметром 1 будет идти обратно на сервер и получить cardetails для автомобиля с идентификатором = 1 , Моя проблема не в том, что, но когда данные JSON вернулись, я хочу, чтобы URL-адрес изменился на cardetails # 1 или что-то в этом роде. Таким образом, он может определить, где находится пользователь, браузер может добавить его в свою историю, и если пользователь закроет URL-адрес, браузер сможет найти точную страницу с теми же отображаемыми данными.

источник

2013-02-26 Kern Elliott

Если у вас все еще есть проблемы, и вы хотите получить полную навигацию по URL-адресу, не стесняйтесь попробовать мой [плагин] (https://github.com/CameronAskew/jquery.mobile.paramsHandler), который я недавно создал для jQM 1.4+ –

В этом примере используется jQM changePage() для отправки данных с запросом страницы Ajax. Его можно использовать только в том случае, если аргументом 'to' для changePage() является URL. Для получения дополнительной информации см. jQM documentation.

Инструкции для тестирования примера:

Создать папку
Создайте файл с именем cars.js внутри папки
Создайте файл с именем cars.html внутри папки
Создайте файл с именем car-details.html внутри папки
Заполните каждый файл соответствующим кодом, который вы можете найти ниже
Открыть cars.html, которая является первой страницы и навигации

Добавьте следующий код внутри car.js файла:

$(document).on("pageinit", "#car-page", function(e) { 
    $('#car-list a').on('click', function(e) { 
     e.preventDefault(); 
     $.mobile.changePage('car-details.html', { 
      data: { 
       id: this.id 
      } 
     }); 
    }); 
}); 

$(document).on("pageinit", "#car-details-page", function(e) { 
    var passedId = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href).replace(/.*id=/, ""); 
    $("#details").html(["Selected id is: '", passedId, "'"].join("")); 
});

Добавьте следующий код внутри страницы cars.html.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Cars example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script src="./cars.js"></script> 
    </head> 
    <body> 
     <div id="car-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car list</a></h1> 
      </div> 
      <div data-role="content"> 
       <ul data-role="listview" id="car-list"> 
        <li><a href="#" data-transition="flip" id="acura">Acura</a></li> 
        <li><a href="#" data-transition="flip" id="audi">Audi</a></li> 
        <li><a href="#" data-transition="flip" id="bmw">BMW</a></li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

Добавьте следующий код на страницу car-details.html.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Car Example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script src="./cars.js"></script> 
    </head> 
    <body> 
     <div id="car-details-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car details</a></h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div id="details"></div> 
      </div> 
     </div> 
    </body> 
</html>

Пример 2

Решение с использованием совместно используемого объекта JS:

На второй странице на DIV появляется выбранный идентификатор. Кроме того, URL-адрес содержит идентификатор, поэтому его можно добавить в закладки. В случае, когда пользователь переходит на вторую страницу по первой странице, идентификатор передается на вторую страницу через общую переменную JS. Если пользователь открывает страницу с закладкой, то идентификатор извлекается из окна.location.href.

Обратите внимание, что вместо передачи значения href в общей переменной вы можете передать идентификатор или любое другое значение, которое поможет вам определить выбор пользователя.

Инструкции для тестирования примера:

Создать папку
Создайте файл с именем cars.js внутри папки
Создайте файл с именем cars.html внутри папки
Создайте файл с именем car-details.html внутри папки
Заполните каждый файл соответствующим кодом, который вы можете найти ниже
Открыть cars.html, которая является первой страницы и навигации

Добавьте следующий код внутри car.js файла:

var passDataObject = { selectedHref: null } 

$(document).on("pageinit", "#car-page", function(e) { 
    $(this).find('a').unbind('click').click(function() { 
     passDataObject.selectedHref = this.href; 
    }); 
}); 

$(document).on("pageinit", "#car-details-page", function(e) { 
    var passedId = (passDataObject.selectedHref != null ? passDataObject.selectedHref : window.location.href).replace(/.*id=/, ""); 
    $("#details").html(["Selected id is: '", passedId, "'"].join("")); 
});

Добавьте следующий код внутри страницы cars.html:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Cars example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script src="./cars.js"></script> 
    </head> 
    <body> 
     <div id="car-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car list</a></h1> 
      </div> 
      <div data-role="content"> 
       <ul data-role="listview" id="car-list"> 
        <li><a href="./car-details.html?id=1" data-transition="flip" id="acura">Acura</a></li> 
        <li><a href="./car-details.html?id=2" data-transition="flip" id="audi">Audi</a></li> 
        <li><a href="./car-details.html?id=3" data-transition="flip" id="bmw">BMW</a></li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

Добавьте следующий код внутри автомобиля-details.html:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Car Example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script src="./cars.js"></script> 
    </head> 
    <body> 
     <div id="car-details-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car details</a></h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div id="details"></div> 
      </div> 
     </div> 
    </body> 
</html>

Пример 3

многостраничных Пример (адресная строка URL-адрес не изменяется в зависимости от выбора автомобиля)

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Cars example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script> 
      var passDataObject = { selectedId: null } 

      $(document).on("pageinit", "#car-page", function(e) { 
       $(this).find('a').unbind('click').click(function(e) { 
        e.preventDefault(); 
        passDataObject.selectedId = this.id; 
        $.mobile.changePage('#car-details-page', { transition: 'flip'}); 
       }); 
      }); 

      $(document).on("pagebeforeshow", "#car-details-page", function(e) { 
       $("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join("")); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="car-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car list</a></h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <ul data-role="listview" id="car-list"> 
        <li><a href="#" id="acura">Acura</a></li> 
        <li><a href="#" id="audi">Audi</a></li> 
        <li><a href="#" id="bmw">BMW</a></li> 
       </ul> 
      </div> 
     </div> 
     <div id="car-details-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Car details</a></h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div id="details"></div> 
      </div> 
     </div> 
    </body> 
</html>

Я надеюсь, что это помогает.

источник

2013-02-26 21:57:06

Я получаю страницу загрузки с ошибкой в любое время, когда я нажимаю ссылку в cars.html, почему это так? –

Хорошо, исправлено это сейчас отлично, спасибо –

@KernElliott Добро пожаловать –

Динамическая JQuery Мобильная связь

ответ

Смежные вопросы