Question

我的母版页看起来像这样：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link rel="stylesheet" href="../../Content/CSS/jquery.mobile-1.0a4.1.min.css" />
    <script src="../../Scripts/jquery-1.5.1.min.js"></script>
    <script src="../../Scripts/jquery.mobile-1.0a4.1.min.js"></script>

    <title>Test</title>
</head>
<body>
    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">

        </asp:ContentPlaceHolder>
    </div>
</body>
</html>

我的观点如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mobile.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <p>Hello from Mobile Land</p>
</asp:Content>

Firebug将其显示为HTML：

<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile ui-mobile-rendering landscape ui-loading min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><base href="http://localhost:2189/Home/MobileHome"><link href="../Content/CSS/jquery.mobile-1.0a4.1.min.css" rel="stylesheet">
    <script src="../../Scripts/jquery-1.5.1.min.js"></script>
    <script src="../../Scripts/jquery.mobile-1.0a4.1.min.js"></script>

    <title>
    Test    </title></head>
<body>
    <div>

    <p>Hello from Mobile Land</p>

    </div>


</body></html>

所以我想弄清楚为什么我在屏幕上看不到任何东西？

Answer 1

JQuery mobile要求所有HTML标记都包含在data-role属性中，否则将无法呈现它们。

移动页面的解剖结构如下：

<div  data-role="page"> 
    <div  data-role="header">...</div> 
    <div  data-role="content">...</div> 
    <div  data-role="footer">...</div> 
</div>

如果您将<p>标记放在上面的内容中，它就会起作用。这就是JQuery mobile如何构建页面。如果您包含移动脚本，则每次都会尝试执行此操作。

即使Firebug看到HTML，视图也是空白的

1 个答案: