Я создаю мобильный сайт с помощью jQuery mobile (1.3).
На этом сайте я использую панель для своего меню, которое активируется кнопкой «баров» в левом верхнем углу экрана или путем прокрутки слева направо (на рабочих столах, нажимайте и перемещайте мышь вправо).
Все это работает нормально, пока я не перейду на другую страницу. Новая страница загружается с помощью функции jQuery mobile AJAX, в console.log моя панель div регистрируется, поэтому я знаю, что она есть, но функция .panel ('open') не запускается.
Я попробовал сделать мои ссылки двумя разными способами без везения:
<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, демонстрирующий проблему, но вот ссылка на мою страницу dev: snip
Я надеюсь, что кто-то может помочь мне исправить эту проблему, и моя .panel («open») запускается после навигации по страницам.
EDIT: текущая функция салфетки:
$(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"); }); });
Вам нужно изменить логику страницы.
Когда открывается новая страница, это просто другая страница, загруженная в DOM. Но когда вы пытаетесь открыть панель на второй странице, она попытается открыть панель первой страницы, потому что она имеет то же самое.
Я тестировал это на вашей странице, и он работает:
$.mobile.activePage.find('#menu').panel("open");
<!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>
<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 -->
Все, что вам нужно, это код внутри pageinit , так как последний раз срабатывает только один раз.
$('div[data-role="content"]').on("swiperight",function(){ var activepage = '#' + $.mobile.activePage[0].id; $.event.special.swipe.horizontalDistanceThreshold = 80; $('activepage #menu').panel("open"); });