个人中心
gpt4 book ai didi

php - jQuery 手机 : panel open not triggered after page navigation

转载 作者：塔克拉玛干 更新时间：2023-11-02 09:08:30 25 4
gpt4 key购买 nike

我正在使用 jQuery Mobile (1.3) 创建一个移动网站。

在这个网站上，我使用了一个菜单面板，可以通过屏幕左上角的“条形”按钮或从左向右滑动(在桌面上；单击鼠标并将鼠标向右移动)来激活).

这一切都工作正常，直到我导航到另一个页面。新页面使用 jQuery 移动 AJAX 函数加载，在 console.log 中记录了我的面板 div，所以我知道它在那里，但未触发 .panel('open') 函数。

我尝试用 2 种不同的方式制作链接，但没有成功:

<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

我希望有人能帮我解决这个问题，我的 .panel('open') 在页面导航后被触发。

编辑:当前滑动功能:

$(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");

证明

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 -->

关于php - jQuery 手机 : panel open not triggered after page navigation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16509926/

25 4 0
文章推荐： iphone - 无效的应用程序二进制文件
文章推荐： iphone - 长时间运行的 REST API
文章推荐： iphone - 查询解析 SDK 加入两个类
文章推荐： ios - NSSearchPathForDirectoriesInDomains NSUserDomainMask
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com