5

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

$(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 的引用。当您导航到“默认”时，用户会看到原始的 unstlyed html 添加到页面中，然后闪烁并且 jquery 移动样式进入。无论如何我可以摆脱在添加 jquery 移动样式之前向用户显示 unstlyed 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 调用..

 $.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 移动事件不参与（我不知道为什么）

4

3 回答 3

1

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

这是我可以保证用户永远不会看到无样式的 html 的唯一方法。

于 2012-09-13T01:41:48.207 回答
1

听起来您误解了启用 ajax 的设置是如何工作的。

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

另一方面，如果ajax enabled设置为false，则它的行为类似于常规链接，在这种情况下会加载整个页面，并且如果您的 JQM 脚本位于底部，那么在加载之前它将无法增强 DOM，这就是您的原因看到那闪烁。

作为一个侧面，page transistions are only available ifajax 启用了is set totrue`。

总而言之，除非您有理由不这样做，否则您可能应该ajax enabled设置为 true，并在您的主页上包含相关脚本。如果您需要使用ajax enabledset 来false尝试将 jQuery 脚本放在标头中，以便它们在 DOM 的其余部分之前加载。

或者，您可以做的是隐藏容器元素，您将在其中附加 html，然后在完成后显示它，例如

CSS

.displayNone { display: none; }

HTML

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

JS

 $('.myBodyContent', this).html(employees);
    $(this).trigger('create');
    $('.myBodyContent', this).reomveClass('displayNone');
于 2012-09-13T14:01:46.640 回答
0

尝试使用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
});

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

我希望这有帮助！

编辑

这是一个实施了建议修复的JSFiddle。

于 2012-09-08T19:35:17.327 回答