** Думаю, что опубликую обновление.jQuery mobile/phonegap не захватывает салфетки на второй странице html
Очевидно, JQM не может обрабатывать страницы так, как я пытался. Таким образом, структура страницы, которую я хотел:
"index.html" | | - Суб страница 1 | - Суб страница 2 | - Суб страница 3 и т.д.
"page2.html" | | - Суб страница 1 | - Суб страница 2 | - Суб страница 3 и т.д.
и использовать swipeleft или право перемещаться между страницами! Отдельные страницы в порядке, но как только я иду от «index.html» в «page2.html» mobile.changepage не может справиться с этим и так «ошибки» ползучесть.
**
Я пытаясь разработать приложение jQuery mobile (phonegap), которое использует функции салфетки, и я что-то упустил здесь, и я уверен, что это будет момент facepalm, но я просто не могу об этом подумать.
Как я понимаю, способ работы jqm (лучше всего при вызове страниц с ajax) Мне нужно загрузить весь код для моего сайта в файл index.html! Это я сделал. Затем мне нужно вызвать $ (document) .on ('pageinit', '#swipehome', function(), например, для выполнения кода при загрузке документа, init и т. Д. Но я не могу понять, почему я не могу забрать события на второй странице. у меня есть две страницы (будет больше, но 2 для тестирования этого процесса) index.html & swipe.html
index.html имеет все ссылки на * .js & * .css. Он вызывает swipe.html из функции slidepage
теперь суть проблемы, почему не прикосновение событий swipe.html быть подобраны?
Как я понял, с помощью AJAX загрузки страницы, если вам положить js в index.html, с которой она связана, и вы можете использовать ее на второй странице?
Я создал простой jsf, чтобы показать, что мне нужно!
В основном я хочу функциональность в swipe.html страницу, которая была связана с index.html
Любая помощь приветствуется!
George
Вот и все коды!
** ОБНОВЛЕНИЕ К main.JS ** Теперь я фиксирую событие swipe на второй странице с обновленным кодом ниже, BUT страница не меняется !!! "main.js"
/* === UPDATED CODE === */
$(document).on('swipe', '#swipehome', function() {
console.log('Changing to #swipepage1');
$.mobile.changePage('#swipepage1','slide',false,true);
console.log('End');
});
//Initialise the slider on the swipe page
$(document).on('pageinit', '#swipehome', function() {
$("#home").swiperight(function() {
$.mobile.changePage("#page1",{ transition: "slide" , reverse: true});
});
$("#home").swipeleft(function() {
$.mobile.changePage("#page2",{ transition: "slide"});
});
$("#page1,#page2").swipe(function() {
$.mobile.changePage("#swipehome", { transition: "fade"});
});
});
//Initialise the slider on the test page
$(document).on('pageinit', '#testg', function() {
$('#foobar').bxSlider({
touchEnabled: true,
pager: false,
pagerSelector: false
});
});
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
function slidePage(page) {
$.mobile.changePage(page,{'transition': "slide"});
console.log(page);
}
"index.html"
<!DOCTYPE html>
<html>
<head>
<title>swipe test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- STYLESHEETS //-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0-rc.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- JavaScripts //-->
<script src="js/cordova-2.5.0.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/database.js"></script>
<script src="js/audio.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div data-role="page" id="start">
<div data-role="content">
<div style="margin: 0 auto;">
<a href="#" onClick="slidePage('swipe.html');" class="next" data-role="button" data-theme="a" style="width: 150px; margin: 0 auto;">Swipe</a>
</div>
</div>
</div>
</body>
</html>
«коромысло.HTML»
<!DOCTYPE html>
<html>
<body>
<div data-role="page" id="swipehome">
<div data-role="content">
<p>Swipe left or right to change pages</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<p>You Swiped right<br/>Swipe any direction to go back</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>You Swiped left<br/>Swipe any direction to go back</p>
</div>
</div>
</body>
</html>
Надеется, что это помогает!
Скажите мне, вещь, ваша вторая страница имеет свой собственный файл js или все это в side файл index.html js? – Gajotres
Вам не нужно помещать все в один js. Лично я включаю 10 js-файлов на странице html. – wmfairuz
Извините, что ясный, у меня есть несколько файлов * .js, но единственное релевантное - main.js. Вторая страница swipe.html не имеет собственного js-файла, но я использую $ (document) .on ('pageinit', '#swipehome', function() {для инициализации функций для этой страницы – TheTechy