2013-07-03 3 views
-1

Я пытаюсь начать с jQuery Mobile, но я застреваю, когда пытаюсь создать левую панель с наложением слайда. Вот мой код:jQuery Mobile создать панель

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>- test-</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 
    <div data-role="page"> 
    <div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay"> 
    <h3>Default panel options</h3> 
    <p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p> 
    <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p> 
</div> 
<div data-role="header"> 
    <h1>test</h1> 
    <a href="#testPanel" data-role="button" data-icon="plus" data-iconpos="notext">Contact</a> 
</div> 
<div data-role="content"> 
</div> 
<div data-role="footer" data-position="fixed"> 
    <h4>Copyright 2013 - All Rights Reserved -</h4> 
</div> 
</div> 
</body> 
</html> 

Это не работает, когда я нажав на мою кнопку ссылки у меня есть это сообщение «Ошибка при загрузке страницы» и содержание моей панели уже отображается на странице. Спасибо за вашу помощь!

ответ

2

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

Вот working demo с той же разметке с помощью JQuery 1.9.1 и JQuery Mobile 1.3.1

+0

Благодаря спариванию, это, безусловно, работает сейчас! –

1

Если это не ваш индекс страницы, то вы, скорее всего, перейдите к нему через <a href="yourpage.html>Page</a> в этом случае jquery использует запрос Ajax для перехода с одной страницы на другую, запрос ajax не загружает весь контент вашей страницы, он загружает только содержимое тега <body>, то есть любые скрипты, которые вы пишете внутри тега <head>, загружаться не будут, страница не будет работать должным образом, и вы столкнетесь с ошибкой , чтобы решить эту проблему, вам необходимо использовать data-ajax="false" внутри атрибута <a>, чтобы предотвратить использование jQuery mobile Ajax вызов для загрузки вашей страницы.

, если это ваш индекс страницы, то, пожалуйста, мимо код JS, чтобы мы могли проверить его во всех случаях проверить эти ссылки for loading jqm pages и эту ссылку problem of ajax call in jqm

+0

Большое спасибо за это, это действительно полезно для новичка, подобного мне! привет, D –

+0

приветствуются –

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