jQuery Mobile如何处理页面更改

Question

我在.net和JQM中使用母版页写了两页。但是当我重定向到第二页时，JQM滑动控件在没有刷新的情况下不起作用。此外，任何控制或功能，如简单的警报（）不起作用。我正在分享我的代码：

母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMaster.master.cs" Inherits="Password.Masters.UserMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-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 type="text/javascript">
         $(document).on("pageinit", "#demo-page", function () {
             $(document).on("swipeleft swiperight", "#demo-page", function (e) {
                 if ($.mobile.activePage.jqmData("panel") !== "open") {
                     if (e.type === "swiperight") {
                         $("#left-panel").panel("open");
                     }
                 }
             });
         });
     </script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div data-role="page" id="demo-page" data-theme="d">
        <div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner">
            <h1>Web Page</h1>
            <a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
        </div>

        <div data-role="panel" id="left-panel" data-theme="b">
            <!---->
            <ul data-role="listview" data-theme="d">
                <li data-icon="arrow-r" data-theme="b">Welcome
                    <asp:LoginName ID="LoginName1" runat="server" />
                </li>
                <li data-icon="home"><a href="../Pages/Home.aspx" data-rel="">Homepage</a></li>                

            </ul>
        </div>

        <div  data-role="content">
        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
        </div>

    </div>
</body>
</html>

Slide.aspx（这是一个空白页）：

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Slide.aspx.cs" Inherits="Password.Pages.Slide" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">

     </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

Home.aspx（这也是一个空白页）：

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Password.Pages.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">

     </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

我想在使用母版页的每个页面中使用滑动控件，但是当我使用左滑动面板从Slide.aspx转到Home.aspx时，滑动控件不起作用。当我刷新页面时，它就可以工作了。按钮控件（例如）也是如此。我怎样才能使它工作？关于“pageinit”的问题是什么？ document.ready（）怎么样？我尝试了所有可能的解决方案，但失败了感谢。

Answer 1

jQuery Mobile如何处理页面更改

要了解这种情况，您需要了解jQuery Mobile的工作原理。它使用ajax加载其他页面。

第一页正常加载。其 HEAD 和 BODY 已加载到 DOM 中，他们在那里等待其他人内容。加载第二页后，仅 BODY 内容会加载到 DOM 。

这就是为什么您的按钮成功显示但点击事件无效的原因。在页面转换期间忽略其父 HEAD 的同一点击事件。

以下是官方文档：http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，你不会在他们的文档中找到这个描述。以太他们认为这是一种常识，或者他们忘记将其描述为我的其他主题。（jQuery Mobile文档很大但缺少很多东西）。

解决方案1

在第二页和其他所有网页中，将 SCRIPT 标记移至 BODY 内容中，如下所示：

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

这是一个快速解决方案，但仍然是一个丑陋的解决方案。

工作示例可以在我的其他答案中找到： [更改页面后未触发的页面显示] [2]

另一个工作示例：[页面加载与jQuery-mobile过渡不同] [3]

解决方案2

将所有javascript移动到原始的第一个HTML中。收集所有内容并将其放入单个js文件中，放入 HEAD 。在加载jQuery Mobile之后初始化它。

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

最后，我将描述为什么这是一个好的解决方案的一部分。

解决方案3

在按钮中使用 rel =“external”，以及用于更改页面的每个元素。因为它ajax不会用于页面加载，你的jQuery Mobile应用程序将表现得像普通的Web应用程序。不幸的是，这不是一个很好的解决方案。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

官方文档，寻找章节： Linking without Ajax

现实解决方案

现实的解决方案将使用解决方案2 。但与解决方案2不同，我会使用相同的index.js文件并在每个可能的其他页面的 HEAD 内进行初始化。

Answer 2

将脚本调用放在块中：

<div data-role="page" id="demo-page" data-theme="d">

... your script

</div>

如果您通过AJAX加载页面，标题将只处理一次（或刷新）。

jquery mobile需要刷新才能正常工作

2 个答案:

jQuery Mobile如何处理页面更改

解决方案1

解决方案2

解决方案3

现实解决方案

jquery mobile需要刷新才能正常工作

2 个答案:

jQuery Mobile如何处理页面更改

解决方案1 ​​

解决方案2

解决方案3

现实解决方案

解决方案1