Навигация между страницами с помощью JQuery Mobile - PullRequest
Новая
       21

Навигация между страницами с помощью JQuery Mobile

2 голосов
/ 31 января 2012

Я работаю над приложением, которое использует JQuery Mobile . Мое приложение имеет 3 экрана, которые разделены на два отдельных файла ASP.NET. Это экраны «Страница 1», «Страница 2 - А» и «Страница 2 - Б». Эти экраны размещены в следующих файлах:

page1.aspx 

Page 1

page2.aspx 

Page 2 - A
Page 2 - B

У меня есть причины для этого, пример, который я привожу здесь, просто для демонстрации проблемы. Проблема в том, что когда я перехожу со страницы 1 на страницу 2 - А, все работает. Однако, когда я нажимаю «B» на странице 2 - A, экран не переходит на страницу. Но вот где это становится странным. Если я перехожу прямо к странице page2.aspx в моем браузере, я могу перейти на страницу 2 - B без проблем. Проблема возникает, только когда я начинаю с page1.aspx. Может кто-нибудь, пожалуйста, помогите мне, мой код для страниц выглядит следующим образом:

page1.aspx 

<!DOCTYPE html> 

<html>
  <head><title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <link rel="stylesheet" href="/app.css" />

  <script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
  <script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> </script> 
  </head>

  <body>
    <form method="post" action="page1.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" />      
      </div>

      <div data-role="page">
        <div data-role="header"><h1>Page 1</h1></div>

        <div data-role="content">   
            <a href="page2.aspx" data-role="button">Page 2</a></div>
        </div>
      </div>
    </form>
  </body>
</html>

page2.aspx 

<!DOCTYPE html> 
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="/app.css" />

    <script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> 
    </script> 
  </head>

  <body>
    <form method="post" action="page2.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" />
      </div>

      <div id="A" data-role="page">
        <div data-role="header"><h1>Page 2 - A</h1></div>
        <div data-role="content">
          <a href="#B " data-role="button">B</a></div>
    </div>
      </div>

      <div id="B" data-role="page">
        <div data-role="header"><h1>Page 2 - B</h1></div>
        <div data-role="content">
            I can't get to this page!
        </div>
      </div>
    </form>
  </body>
</html>

Ответы [ 4 ]

2 голосов
/ 31 января 2012

Я думаю (но не пробовал это), вам нужно использовать $.mobile.loadPage('testpage.html'), чтобы сначала загрузить страницу в DOM, а затем использовать $.mobile.changePage('#bar') для перехода.

Подробнее об этом здесь:

Также я видел использование целевого атрибута , но не уверен, будет ли это работать с использованием $.mobile.changePage()

Также я думаю, что jQM видит это как 'Deep Linking', но я вижу, что это не то, чего вы пытаетесь достичь

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ : Поскольку мы используем хеш для отслеживания истории навигации для всех страниц Ajax, в настоящее время невозможно углубить ссылка на якорь (index.html#foo) на странице в jQuery Mobile, потому что фреймворк будет искать «страницу» с идентификатором #foo вместо родного поведения прокрутки к контенту с этим ID.

1 голос
/ 03 апреля 2012

Вам необходимо пометить внешнюю страницу как внешнюю, т.е.rel = "external"

Это решит вашу проблему: 

  <a href="page2.aspx" rel="external" data-role="button">Page 2</a>
0 голосов
/ 21 марта 2017

Вы можете настроить таргетинг: target = "_ self", для меня это работа 100%

0 голосов
/ 31 января 2012

Хорошо, это будет звучать немного странно.Но я попробовал ваш пример (скопировав ваши примеры кода) и столкнулся с той же проблемой, что и вы.Однако я заметил, что у вас есть пробел в вашей ссылке на страницу #B, как показано ниже: 

<a href="#B " data-role="button">...</a>

Когда я удалил пробел, все работало нормально.Попробуйте и дайте мне знать, если это работает для вас.

...