Привет всем, я перехожу от index.html к test.html как $.mobile.changePage("test.html", {transition : "slide"});
, который отлично работает. Но в моем test.html есть несколько html-страниц в разных div. В test.html я вызываю другую html-страницу, которая находится в другом div в том же html-файле (, т.е. test.html )как $.mobile.changePage("#secondtestPage", {transition : "slide"});
. Но здесь нет перехода на secondtestPage. Мой index.html выглядит как:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Ins ide callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("test.html", {transition : "slide"});
}
</script>
</body>
</html>
Теперь страница переходит к test.html, и мой test.html выглядит как:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
</div>
<script type="text/javascript">
function callnewSecondPage()
{
alert ("Inside callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("#secondtestPage", {transition : "slide"});
//$.mobile.changePage("index.html", {transition : "slide"});
}
</script>
</div>
<div data-role="page" id="secondtestPage" onclick=callThirdPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdtestPage');
}
</script>
</div>
<div data-role="page" id="thirdtestPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthtestPage');
}
</script>
</div>
<div data-role="page" id="fourthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
</div>
</div>
<div data-role="page" id="fifthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
</div>
</div>
<div data-role="page" id="sixthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
</div>
</div>
</body>
</html>
Но теперь при нажатии кнопки он не переходит к «callSecondPage». и если я вызову $.mobile.changePage("index.html", {transition : "slide"});
, то он правильно перейдет к index.html, то почему в многостраничном changePage не работает? еще одна вещь. Если я заменю код index.html кодом test.html, тогда $.mobile.changePage("#secondtestPage", {transition : "slide"});
будет работать отлично.
Я в замешательстве, почему он так себя ведет? Любое предложение будет оценено. Заранее спасибо.