jQuery Mobile:页面导航后未触发面板打开 [英] jQuery mobile: panel open not triggered after page navigation
本文介绍了jQuery Mobile:页面导航后未触发面板打开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jQuery mobile(1.3)创建一个移动网站.
I am creating a mobile website using jQuery mobile (1.3).
在此站点中，我使用的是菜单面板，该面板通过屏幕左上方的栏"按钮或从左向右滑动来激活(在台式机上；单击并向右移动鼠标) ).
In this site I'm using a panel for my menu, which get activated by the 'bars' button in the top left of the screen or by swiping from left to right (on desktops; click and move mouse to the right).
在我导航到其他页面之前，所有这些都工作正常.使用jQuery移动AJAX函数加载新页面，在console.log中记录了我的面板div，所以我知道它在那里，但是没有触发.panel('open')函数.
This all is working fine until I navigate to a different page. The new page loads using the jQuery mobile AJAX function, in the console.log my panel div is logged so I know it's there but the .panel('open') function is not triggered.
我尝试用两种不同的方式制作链接，但没有运气:
I tried making my links 2 different ways with no luck:
<a href="?controller=website&action=algemeenInvoer">Algemene invoer</a>
<a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a>
自从我使用php以来，我无法创建一个简单的JSFiddle来演示问题，但这是指向我的开发页面的链接: snip
Since I use php I can't create a simple JSFiddle demonstrating the problem but here is a link to my dev page: snip
我希望有人可以帮助我解决此问题，并在页面导航后触发.panel('open').
I hope someone can help me fix this problem and my .panel('open') is triggered after page navigation.
当前的滑动功能:
$(document).on('pageinit',function(){
$('div[data-role="content"]').on("swiperight",function(){
console.log($('#menu'));
//open panel after swiped x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('#menu').panel("open");
});
});
推荐答案
您需要更改页面逻辑.
You need to change your page logic.
打开新页面时，它只是另一个加载到DOM中的页面.但是，当您尝试在第二页内打开面板时，它将尝试打开第一页面板，因为它们具有相同的功能.
When new page is opened it is just another page loaded into the DOM. But when you try to open a panel inside a second page it will try to open a first page panel because they have the same.
我已经在您的页面上对此进行了测试，并且可以正常工作:
I have tested this on your page and it is working:
$.mobile.activePage.find('#menu').panel("open");
证明
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Logboek</title>
<!-- Springboard icon (retina) -->
<link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png" />
<!-- iPhone 4(S) startup image -->
<link href="images/splash-screen-640x920.png" rel="apple-touch-startup-image" media="(device-height: 480px)"/>
<!-- iPhone 5 startup image -->
<link href="images/splash-screen-640x1096.png" rel="apple-touch-startup-image" media="(device-height: 568px)"/>
<link rel="stylesheet" href="http://logboek.zavee.nl/public/css/theme/TEAM-WJM.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pageinit',function(){
$('div[data-role="content"]').on("swiperight",function(){
console.log('swipe');
$.mobile.activePage.find('#menu').panel("open");
});
});
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="index">
<div data-role="panel" id="menu" data-theme="d">
<ul data-role="listview" data-theme="d">
<li><a href="second.html">Algemene invoer</a></li>
<li><a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a></li>
<li><a href="?controller=website&action=trainingInvoer">Training invoeren</a></li>
<li><a href="#" onclick="$.mobile.changePage('?controller=website&action=trainingInvoer', { transition:'slideup'} );">Training invoeren, , using mobile.changePage</a></li>
<!--<li><a href="#">Overzicht bekijken</a></li>-->
</ul>
</div>
<div data-role="header" data-position="inline">
<a href="#menu" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true"></a>
<h1>Trainingslogboek</h1>
</div>
<div data-role="content" data-theme="a" id="content">
<form method="post" action="text.php">
<div data-role="fieldcontain">
<label for="datum">Datum:</label>
<input type="date" name="datum" id="datum" />
</div>
<div data-role="fieldcontain">
<label for="gewicht">Gewicht in kg:</label>
<input type="number" name="gewicht" id="gewicht" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="op">Ochtendpols:</label>
<input type="number" name="op" id="op" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Slaap:</legend>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" value="on" />
<label for="radio-choice-h-1a">1</label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" value="off" />
<label for="radio-choice-h-1b">2</label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" checked="checked" value="other" />
<label for="radio-choice-h-1c">3</label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1d" value="other" />
<label for="radio-choice-h-1d">4</label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1e" value="other" />
<label for="radio-choice-h-1e">5</label>
</fieldset>
</div>
<input type="submit" value="Opslaan" />
</form> </div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>
second.html
<div data-role="page" data-theme="a" id="second">
<div data-role="panel" id="menu" data-theme="d">
<ul data-role="listview" data-theme="d">
<li><a href="?controller=website&action=algemeenInvoer">Algemene invoer</a></li>
<li><a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a></li>
<li><a href="?controller=website&action=trainingInvoer">Training invoeren</a></li>
<li><a href="#" onclick="$.mobile.changePage('?controller=website&action=trainingInvoer', { transition:'slideup'} );">Training invoeren, , using mobile.changePage</a></li>
<!--<li><a href="#">Overzicht bekijken</a></li>-->
</ul>
</div>
<div data-role="header" data-position="inline">
<a href="#menu" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true"></a>
<h1>Trainingslogboek</h1>
</div>
<div data-role="content" data-theme="a" id="content">
<form>
<div data-role="fieldcontain">
<label for="datum">Datum:</label>
<input type="date" name="datum" id="datum" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend></legend>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" data-mini="true" value="on" checked="checked" />
<label for="radio-choice-h-1a">1<sup>e</sup></label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" data-mini="true" value="off" disabled="disabled" />
<label for="radio-choice-h-1b">2<sup>e</sup></label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" data-mini="true" value="other" disabled="disabled" />
<label for="radio-choice-h-1c">3<sup>e</sup></label>
<input type="radio" name="radio-choice-h-1" id="radio-choice-h-1d" data-mini="true" value="other" disabled="disabled" />
<label for="radio-choice-h-1d" style="padding-bottom:2px;">training van vandaag.</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>EMI score:</legend>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" />
<label for="radio-choice-h-2a">1</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" />
<label for="radio-choice-h-2b">2</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other" />
<label for="radio-choice-h-2c">3</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2d" checked="checked" value="other" />
<label for="radio-choice-h-2d">4</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2e" value="other" />
<label for="radio-choice-h-2e">5</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend></legend>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" />
<label for="radio-choice-h-2a">6</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" />
<label for="radio-choice-h-2b">7</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other" />
<label for="radio-choice-h-2c">8</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2d" value="other" />
<label for="radio-choice-h-2d">9</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2e" value="other" />
<label for="radio-choice-h-2e">10</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Blessure:</legend>
<input type="radio" name="radio-choice-h-3" id="radio-choice-h-3a" value="on" />
<label for="radio-choice-h-3a">Ja</label>
<input type="radio" name="radio-choice-h-3" id="radio-choice-h-3b" value="off" />
<label for="radio-choice-h-3b">Nee</label>
</fieldset>
</div>
</form>
</div> <!-- /content -->
这篇关于jQuery Mobile:页面导航后未触发面板打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
