Question

当我使用我的手机测试应用程序时，我使用后面的设备按钮显示上一页，这是与所有页面一起使用，除了一页显示非样式页面时尝试进入上一页所以奇怪的是。
这里有一个简短的解释。有3页#main_menu，＃first_map，＃second_map 当我进入#second_map页面时，按下后退按钮时应该转到#first_page 但实际上它显示的#main_menu页面没有css样式。你能不能告诉我问题是什么我们可以如何解决它提前谢谢你。我提供源代码：这是main_page

            </div>
            <h2 id="thx_msg" style="margin:0 auto;"></h2>
           <div class="grid2">
                <div class="first" id="search_btn">
                    <div>
                        <img src="images/loupe.jpg"/>
                    <div>
                    </div>Search for a Spot</div>
                </div>
                <div class="second" id="submit_spot_btn">
                    <div>
                        <img src="images/spot.jpg"/>
                    </div>
                    <div>Submit a spot</div>
                </div>
            </div>
            <ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
                <li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
                <li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
            </ul>
     </div>

这里的first_map页面名为spot_page

<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
    <img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
    <p class="center" style="font-size:16px;font-weight:bold;">
        Search for a Spot
    </p>
    <ul class="some_space" style="margin:0 auto;
                                        margin-left:auto;
                                        margin-right:auto;
                                        align:center;
                                        text-align:center;
                                        width:280px;">
    <li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
    <li id="to"></li>
    <li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
    </ul>
    <div id="hidden_scroller" style="display:none">
    <select id="distance" name="Within">
            <option value="1">1 Mile</option>
            <option value="3">3 Miles</option>
            <option value="5">5 Miles</option>
            <option value="10">10 Miles</option>
        </select>
    </div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
                            height: 247px;border:1px solid black;margin:0 auto">

</div>
</div><!-- split  view -->

最后是第二张地图：

        <div data-role="page" id="nearby_page">
        <div data-role="header" style="overflow:hidden;">
            <img class="logo_icon" src="images/logo_icon.png">
        </div><!-- header -->
        <div class="clear"></div>
        <div class="second_header">Spots nearby</div>
        <div id="map" style="width: 100%;
                            height: 398px;border:1px solid black;margin:0 auto">

        </div>
    </div>

如您所见，页面彼此分开。
我有一个最后一个问题，导航插件可以帮助解决像jquery历史插件这样的问题，感谢您的帮助。

Answer 1

确保将您的网页放在不同的单独页面上。如果不是这样的错误将发生。大多数情况下，您会遇到异常导航错误。这就是我的经验。

顺便说一句，你应该为这里的人们展示更多的代码来帮助你。

<强>更新

PhoneGap和Android的后退按钮表现得很奇怪。我在我的应用程序中所做的是禁用后退按钮并在顶部标题上给出了软后退按钮。简单的history.back()将为后退按钮带来魔力。

您可以按如下方式禁用。

$(function(){
    document.addEventListener("deviceready", onDeviceReady, false);
})

// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
    console.log("Back button pressed but nothing happened");
}

无论如何这是我的方法。你可以选择与众不同。

移动设备后退按钮jquery移动错误页面没有样式

1 个答案: