Question

我需要一些帮助来理解JQuery Mobile中的页面导航。我读过的文档假设您正在将数据加载到DOM中，在这种情况下我不是（不知道为什么，我接管了这个代码库）。

您可以在下面看到，我有一个MVC提供的页面。当用户从ul中选择一个链接时，它会调用函数来设置window.location，而不是将页面加载到DOM中。

我的问题是，是否有更正确的方法为JQuery Mobile执行此操作，因为此问题：在每个函数中调用$.mobile.loading('show')，然后更改窗口位置。此页面缓存在iPhone上，加载微调器显示，因此如果用户按下，它将从缓存中加载此页面，并且加载微调器仍在显示。由于它是从缓存加载的，pageinit和pageshow都不会被触发。

所以有两个问题

是否有更正确的方法可以将加载动画从一个页面显示到另一个页面，而不是加载到DOM中。
如果没有，是否有解决方法？

由于

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="myform" method="post" action="/Mobile/Device?isSearch=1" data-ajax="false" >
<ul data-role="listview">
    <li >   
        <h2 >  Search for a device </h2> 
        <p> <input type="search" placeholder="Enter a term to filter active devices" name="txtfilter" data-mini="true"  id="txtSearch"  />  </p>
        <input type="hidden" id="lbluserLatitude" name="lbluserLatitude"/>
        <input type="hidden" id="lbluserLongitude" name="lbluserLongitude"/>
    </li> 
    <li>
        <a id="lnkViolationDevice" onclick="gotoViolationDevices();">
            <h2>
                Error Devices
            </h2>
            <p>
                Only devices with Policy Violations
            </p>
            <span class="ui-li-count"><%= Model.UpdateTotalRecordCount%></span> 
        </a>
    </li>
    <li id="lnkNearby">
        <a onclick="gotoNearbyDevices();">  
            <h2 > Active Devices</h2> 
            <p></p>
            <span class="ui-li-count"><%= Model.TotalRecordCount%></span>
        </a>
    </li> 
    <li >
        <a id="lnkInactiveDevice" onclick="gotoInactiveDevices();"> 
            <h2>Inactive Devices</h2> 
            <p>New or Decommissioned </p>
            <span class="ui-li-count"><%= Model.InactiveTotalRecordCount%></span>
        </a>
    </li> 
</ul>
<br />

<script type="text/javascript">

var userLatitude = "";
var userLongitude = "";

$(document).on("pageinit", function () {
    $('#txtSearch').attr('autocorrect', 'off');
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else {
        alert("Geolocation is not supported by this browser.");
    }
});

function showPosition(position) {
    broswerSupportGeo = true;
    userLatitude = position.coords.latitude;
    userLongitude = position.coords.longitude;
    $('#lbluserLatitude').val(userLatitude);
    $('#lbluserLongitude').val(userLongitude);
    //$('#lnkNearby').show();
}

function mobileLogout() {
    $.mobile.loading('show');

    $.ajax({
        url: "/Account/Mobile_LogOff",
        type: "POST",
        async: true,
        success: function (result) {

            window.location = '<%= Url.Action("LogOn", "Account", new{Area=""}) %>';
        }
    });
}

function GoFullPage() {
    window.location = "/Device/Index?mode=full";
}

function gotoNearbyDevices() {
    $.mobile.loading('show');
    var actionLink = '<%= Url.Action("Index", "Device", new {tabIndex = "2", latitude = "LatitudeValue", longitude = "LongitudeValue"} ) %>';
    actionLink = actionLink.replace("LatitudeValue", userLatitude);
    actionLink = actionLink.replace("LongitudeValue", userLongitude);
    window.location = actionLink;
}

function gotoViolationDevices() {
    $.mobile.loading('show');
    var actionLink = '<%= Url.Action("Index", "Device", new {tabIndex = "0", latitude = "LatitudeValue", longitude = "LongitudeValue"} ) %>';
    actionLink = actionLink.replace("LatitudeValue", userLatitude);
    actionLink = actionLink.replace("LongitudeValue", userLongitude);
    window.location = actionLink;
}

function gotoInactiveDevices() {
    $.mobile.loading('show');
    var actionLink = '<%= Url.Action("Index", "Device", new {tabIndex = "1", latitude = "LatitudeValue", longitude = "LongitudeValue"} ) %>';
    actionLink = actionLink.replace("LatitudeValue", userLatitude);
    actionLink = actionLink.replace("LongitudeValue", userLongitude);
    window.location = actionLink;
}

</script>

Answer 1

是否有更正确的方法可以将加载动画从一个页面显示到另一个页面，而不是加载到DOM中？

简短的回答不是，这是不可能的。 AJAX加载被称为AJAX加载器，只有当jQuery Mobile处理页面加载到DOM时它才会起作用。在这种情况下，页面永远不会刷新，因此可以在页面转换期间显示加载程序。

在您的情况下，每次打开新页面浏览器都会触发完整的页面刷新，在完整页面刷新/重新加载/打开期间，任何可见的内容都不会持续存在。
如果没有，是否有解决方法？

现在还是简短的回答。正如我在上一个问题中已经告诉过你的那样，在整页刷新/重新加载/打开期间，任何可见的内容都不会存在。你可以做一件事。因为下一页仍然是jQuery Mobile页面，所以您可以在pagecreate事件期间显示加载器并在pageshow事件期间隐藏它，如果您的页面内容/图像较重，则在窗口加载时或在您使用AJAX加载其他内容时在AJAX成功回调期间隐藏它。

但是，在您更改页面之前，您仍然无法显示加载程序，希望在新页面开始加载后它仍会显示。这根本不可能。

你有没有理由使用？：

window.location = actionLink;

jQuery Mobile有自己的方法来处理没有AJAX的整页转换，无论是 data-rel =＆＃34;外部＆＃34; 属性还是 changePage（）功能页面重新加载参数。

更新

完整的非AJAX更改页面到属性：
```
<a rel="external" href="index.html">Index</a>
```
详细了解 here 。不幸的是，我无法在当前的文档中找到它。
通过changePage（）函数
完整的非AJAX更改页面
首先是一个警告，这个函数已被弃用但坚持到jQuery Mobile 1.5出来之前。有替换功能但除非您使用新的pagecontainer小部件，否则它将无法使用。加上pagecontainer小部件正在进行中，因此移动将是一个糟糕的决定。
```
$.mobile.changePage( "confirm.html", {
    reloadPage : true
});
```
可以找到更多信息here。

JQuery Mobile外部页面导航问题

1 个答案:

更新