javascript - JQuery Mobile 外部页面导航问题

Question

我需要一些帮助来理解 JQuery Mobile 中的页面导航。我读过的文档假设您正在将数据加载到 DOM 中，但在本例中我没有加载数据(不知道为什么，我接管了这个代码库)。

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

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

有两个问题

1. 有没有更正确的方法来显示从一个页面到另一个页面的加载动画，而不是加载到 DOM 中。
2. 如果没有，有解决办法吗？

谢谢

<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

1. 有没有更正确的方法来显示从一个页面到另一个页面的加载动画，而不是加载到 DOM 中？

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

   就您而言，每次打开新页面浏览器都会触发完整页面刷新，在整个页面刷新/重新加载/打开期间，任何可见内容都不会保留。

2. 如果没有，有解决办法吗？

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

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

您使用它有理由吗？ :

window.location = actionLink;

jQuery Mobile 有自己的无需 AJAX 即可处理全页转换的方法，无论是 data-rel="external" 属性还是带有 的 changePage() 函数页面重新加载参数。

更新

1. 通过属性完全非 AJAX 更改页面:

   <a rel="external" href="index.html">Index</a>
   

   了解更多信息 here 。不幸的是，我在当前文档中找不到它的解释。

2. 通过changePage()函数实现完整的非AJAX更改页面

   首先警告，此函数已弃用，但请坚持使用，直到 jQuery Mobile 1.5 发布。有一个替换功能，但除非您使用新的 pagecontainer 小部件，否则它不会为您工作。另外，pagecontainer 小部件正在开发中，因此移动将是一个糟糕的决定。

   $.mobile.changePage( "confirm.html", {
       reloadPage : true
   });
   

   更多信息可参见here .