Перемещение между страницами с помощью JQuery Mobile

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

page1.aspx

Page 1

стр.2. ASPX

Page 2 - A 
Page 2 - B

у меня есть причины делать это образец, который я обеспечиваю здесь только чтобы продемонстрировать проблему проблема заключается в том, когда я иду от страницы 1 к странице 2 -.. А, все работает, однако , когда я нажимаю «B» на Pa ge 2 - A, экран не будет перемещаться по странице. Но вот здесь странно. Если я перейду непосредственно к странице2.aspx в своем браузере, я могу без проблем перейти на страницу 2 - B. Проблема возникает только при запуске на странице1.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>

источник

2012-01-31 Mono Developer

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

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

http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

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

http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

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

http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

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

источник

2012-01-31 15:13:54

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

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

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

источник

2012-01-31 15:23:49 corthmann

Привет corthmann, спасибо за попытку. Я пробовал, что это не сработало для меня :(Я посмотрел на свою исходную кодовую базу, и у нее тоже не было места в href. Спасибо за указатель! –

Единственные другие изменения, которые я внес в ваш код, - это использовать jQuery Mobile 1.0 (вместо 1.0.1) и изменить .aspx на .html (так как это было так, как я хранил ваши образцы), но я не думаю, что это должно иметь значение. Я только пробовал это в firefox, может быть связано с тем, как работают мобильные браузеры. – corthmann

Вы должны пометить внешнюю страницу как внешнюю, т.е. отн = "внешний"

Это позволит устранить проблему:

<a href="page2.aspx" rel="external" data-role="button">Page 2</a>

источник

2012-04-03 10:38:02 Jack

вы можете целевой пользователь: цель = "_ Я" для меня это работа 100%

источник

2017-03-21 10:48:25

Перемещение между страницами с помощью JQuery Mobile

ответ

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