Nic*_*rca 5 javascript asp.net jquery jquery-mobile
我正在向我的应用程序动态添加标记,下面是一个示例代码.
$(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">
©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移动事件不参与(我不知道为什么)
听起来您似乎误解了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 enabled为，false请尝试将 jQuery 脚本放入标头中，以便它们在 DOM 的其余部分之前加载。
或者，您可以做的是隐藏容器元素，您将在其中附加 html，然后完成后显示它，例如
CSS
.displayNone { display: none; }
超文本标记语言
<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');
| 归档时间： |
|
| 查看次数： |
1881 次 |
| 最近记录： |