个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-11-01 04:33:06 25 4
gpt4 key购买 nike

我在下面的示例代码中动态地向我的应用程序添加标记..

$(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。当您导航到 Default 时，用户会看到原始的 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>

我更改了我的代码以反射(reflect)您的 fiddle 示例，但仍然出现闪烁。但是“无样式到有样式的闪烁时间较短，用户仍然会在移动浏览器中看到无样式的页面。你能看看我是如何设置它的吗？我错过了什么吗？

$(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 移动事件不参与(我不确定为什么)

最佳答案

听起来您误解了 ajax enabled 的含义设置有效。

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

另一方面，当 ajax enabled 设置为 false 时，它的行为就像一个常规链接，在这种情况下加载整个页面并且如果您的 JQM 脚本位于底部然后直到它被加载，它将无法增强 DOM，这就是为什么你会看到闪烁。

作为一个方面，页面转换仅在ajax enabled设置为true`时可用。

总而言之，除非您有理由不这样做，否则您可能应该将 ajax enabled 设置为 true，并在您的主页上包含相关脚本。如果您需要将 ajax enabled 设置为 false，请尝试将您的 jQuery 脚本放在 header 中，以便它们在 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');

关于javascript - 应用程序在呈现 Jquery Mobile 之前显示无样式的 Html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12332733/

25 4 0
文章推荐： javascript - AJAX 之前的 Dojo 回调
文章推荐： Chrome 中类型化数组的 Javascript 垃圾回收
文章推荐： javascript - 停止重叠更大的词
文章推荐： javascript - 什么是 "native"，什么不在 React Native 项目中？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com