Question

我正在向我的应用程序动态添加标记，下面是一个示例代码。

$(document).bind("pagechange", function (event, ui) {
  var header = '<h3>' + appNames[i] + '</h3>';

        var ulHeader = '<ul data-role="listview" id="myAppsGridTable" data-inset="true">';

..
   $('.myBodyContent', ui.toPage).append(collapse + header + ulHeader + entire_list + '</ul>' + '</div>');
    $('#NicksPage').trigger('create');

});

我在Default.aspx页面中引用了此页面，并在母版页中引用了jquery mobile。当您导航到默认时，用户会看到添加到页面中的原始未加载的html然后闪烁和jquery移动样式进来。无论如何，我可以摆脱在添加jquery移动样式之前向用户显示未显示的html？

以下是我的母版页的副本：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMobile.master.cs" Inherits="User.Mobile.UserMobile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Css/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
    <link href="Css/jquery.mobile.custom.theme.min.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

<body>

<div data-role="page" data-theme="b" id="NicksPage">

    <div data-role="header" data-position="fixed" data-theme="b">

         <asp:ContentPlaceHolder ID="TopHeaderContent" runat="server"></asp:ContentPlaceHolder>


    </div><!-- /header -->

    <div data-role="content" class="myBodyContent"> 

 <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-theme="b">
    <asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>


    <input type="hidden" id="collapse_value" value="false" />
    </div><!-- /footer -->

</div><!-- /page -->

   //Combined jquery 1.8 and jquery mobile files in one
   <script src="Js/JQ_JQM_combined.js" type="text/javascript"></script>

    //Makes ajax calls to get data
    <script src="Js/UserMobile.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            // disable page transitions
            $.mobile.ajaxEnabled = false;
            $.mobile.defaultPageTransition = 'none';
        });

    </script>
     <asp:ContentPlaceHolder ID="ScriptContent" runat="server"></asp:ContentPlaceHolder>

</body>

</html>

即使是主页也有闪烁问题，它会呈现无样式，然后经过一段时间正确设置为jquery mobile ..

<%@ Page Title="" Language="C#" MasterPageFile="~/Mobile/UserMobile.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="User.Mobile.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TopHeaderContent" runat="server">
    <h1>
        Applications</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div data-role="controlgroup">
<a href="MyStuff.aspx?name=nick&id=1234" data-role="button">My Stuff</a>
<a href="Employees.aspx?name=nick&id=1234" data-role="button">Employees</a>
<a href="list.aspx?name=nick&id=1234" data-role="button">List</a>

</div>


</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="FooterContent" runat="server">
    <div class="lines">
        <div class="footerCopyrightContainer">
            <div class="footerCopyright">
                &copy;2012 NICK ALL RIGHTS RESERVED.</div>
        </div>
    </div>
</asp:Content>

我改变了我的代码以反映你的小提琴示例，但我仍然得到了闪烁。但是“用户仍然看到移动浏览器中没有样式的页面时，无风格设置的闪烁时间更短。你能看看我是如何设置的吗？我错过了什么？

$(document).bind("pagecreate", function (event, ui) {

    //gets params needed from querystring
    arrQrStr = getQueryStringParams();
    name = arrQrStr["name"];
    id = arrQrStr["id"];

});


$(document).delegate('div[data-role=page]', 'pagebeforeshow', function (e, data) {

    var employees = null;

    //returns string of html needed
    employees = getData(name, id);

    $('.myBodyContent', this).html(employees);

    $(this).trigger('create');

});

getData ajax call ..

 $.ajax({
        type: "POST",
        url: "MobileService.svc/REST/GetData",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ id: id}),
        dataType: "json",
        async: false,
        success: function (msg) {

问题来自于此：

  <script type="text/javascript">
      $(document).ready(function () {


          // disable page transitions
          $.mobile.ajaxEnabled = false;
          $.mobile.defaultPageTransition = 'none';



      });


    </script>

如果我从主页面中取出闪烁消失，它会导航页面很好，但数据不会显示。拿出这个脚本打破了ajax调用和jquery移动事件不参与（我不知道为什么）

Answer 1

尝试将jquery移动源脚本放在头部，而不是放在正文的末尾。

这是我能保证用户永远不会看到没有样式的HTML的唯一方法。

Answer 2

听起来你误解了ajax enabled设置是如何工作的。

默认情况下，此设置已启用，当您链接到另一个页面时，JQM会在链接页面上提取它找到的第一个JQM页面（data-role="page"）（因此您无法链接到{{1文件）和增强它（初始化所有JQM小部件），然后将它附加到当前页面的DOM。当JQM执行此操作时，仅拉入JQM页面并在该页面上别无其他（因此第二页won't上的任何脚本和样式都会产生任何影响）。处理此问题的方法是将所有脚本放在当前主页面中。如果你这样做，你需要注意的一件事是你最终可能会有多个页面具有相同的multipage（实际上你当前的设置肯定会有重复id）所以你可能会这样做想要通过ids选择它们。

另一方面，class设置为ajax enabled，它的行为类似于常规链接，在这种情况下，整个页面都会被加载，如果你的JQM脚本在底部，那么直到它被加载它赢了无法增强DOM，这就是你看到闪烁的原因。

作为辅助点false ajax启用page transistions are only available if true`。

总结一下，除非你有理由不这样做，否则应该将is set to设置为true，并包含主页面上的相关脚本。如果您需要将ajax enabled设置为ajax enabled，请尝试将jQuery脚本放在标头中，以便在其余DOM之前加载它们。

另外，你可以做的是隐藏你将附加html的容器元素，然后在完成后显示它，例如

CSS

false

HTML

.displayNone { display: none; }

JS

 <div data-role="content" class="myBodyContent displayNone"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </div>

Answer 3

尝试使用pagebeforeshow代替pagechange。像这样：

$(document).delegate('div[data-role=page]', 'pagebeforeshow', function(e, data){
    var toPage = this; // this references the page that is about to be shown
    // Add items to the page
});

在实际转换动画开始之前，在转换为“toPage”时触发pagebeforeshow事件。这允许您在向用户显示元素和样式之前添加它们。

我希望这有帮助！

修改

这是JSFiddle，其中包含已实施的建议修补程序。

应用程序在呈现Jquery Mobile之前显示无样式的Html

3 个答案: