jQuery Мобильная навигация - PullRequest
Новая
       20

jQuery Мобильная навигация

0 голосов
/ 10 мая 2011

Я пытаюсь создать мобильную версию своих просмотров с помощью jQuery Mobile, но она работает не так, как ожидалось.

У меня две страницы - a.html имеет одну страницу jQuery Mobile (div с data-role="page") и ссылкой на b.html с несколькими страницами jQuery Mobile.Теперь, если я загружаю a.html в свой браузер, я могу перейти к b.html и отобразить главную «страницу», но любые ссылки внутри b.html, ссылающиеся на другие «страницы» div внутри b.html, не будут работать (это хешссылки с href как #otherpage).Если я перейду прямо к b.html, все ссылки будут работать идеально.

Можно ли обслужить несколько "страниц" в файле div, не нарушая навигационные элементы управления?

Я использую последниеjQuery Mobile 1.0 alpha 4.1.

ОБНОВЛЕНИЕ

Я использую платформу Ruby on Rails.

Часть моего мобильного макета: 

<div data-role="page">
  <div data-role="content">
    <%= yield %>
  </div>
</div>
<%= yield :pages %>

Страница a.html - это действие индекса скаффолда Rails: 

<ul data-role="listview">
  <% @tv_series.each do |tv_series| %>
    <li><%= link_to tv_series.title, tv_series %></li>
  <% end %>
</ul>

Страница b.html - это шоу действия того же скаффолда Rails: 

<ul data-role="listview">
  <% @seasons.each do |season| %>
    <li>
      <!-- this are the links that work only if base page was b.html -->
      <a href="#season<%= season.id %>">Season <%= season.number %></a>
    </li>

    <%= render :partial => 'seasons/season.html.erb',
      :locals => { :season => season } %>

  <% end %>
</ul>

Время годачастичное генерирует новую страницу div: 

<% content_for :pages do %>
  <div data-role="page" id="season<%= season.id %>">
    <div data-role="content">
      whatever
    </div>
  </div>
<% end %>

Теперь я получаю ошибку: если я иду к индексу эшафот (/tv_series) и выбираю один элемент, я иду, чтобы показать страницу с URL /tv_series#/tv_series/:id -ссылки, которые я получаю на этой странице, выглядят как /tv_series/tv_series/:id#season134, что явно неверно, jQuery Mobile пытается выполнить запрос AJAX и завершается неудачно, если страница не найдена.Если перейти на /tv_series/:id вручную, все ссылки выглядят нормально (/tv_series/:id#season134).

1 Ответ

1 голос
/ 11 мая 2011

Наконец-то я нашел свой ответ в документации по jQuery Mobile 1.0 alpha 4.1:

Важно отметить, что если вы ссылаетесь с мобильной страницы, которая была загружена через Ajax, на страницу, содержащую несколько внутренних страниц, вам нужно добавить rel = "external" или data-ajax = "false" к ссылке , Это говорит фреймворку о необходимости полной перезагрузки страницы, чтобы очистить хеш Ajax в URL. Это очень важно, потому что страницы Ajax используют хеш (#) для отслеживания истории Ajax, в то время как несколько внутренних страниц используют хэш для обозначения внутренних страниц, поэтому между этими двумя режимами будут конфликты.

Так что с текущей системой навигации это просто невозможно.

...