在移动MVC网站执行jquery

我使用的是来自visual studio的jquery mobile模板。在我版式视图中，我有以下的标记在移动MVC网站执行jquery

<div data-role="page" @(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">

当我浏览视图显示我想要的数据全屏attibute更改为true。这里是我试图用来做到这一点的代码..

<script type="text/javascript"> 
    $("#indexPage").live('pageinit', function() { 
      alert("Code Engaged"); 
      $("#div").attr("data-fullscreen", "true"); 
     }); 
</script>

我不能得到这个代码搞。我在哪里放置代码来使用它？布局有几个部分..

<head> 
    <meta charset="utf-8" /> 

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
     Remove this if you use the .htaccess --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <title>@Page.Title</title> 
    <meta name="description" content="jQuery Mobile Site"> 
    <meta name="author" content=""> 

    <!-- Mobile viewport optimized: j.mp/bplateviewport --> 
    @*<meta name="viewport" content="width=device-width, initial-scale=1.0">*@ 
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 


    <!-- jQuery Mobile Latest Styles --> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/latest/jquery.mobile.min.css" /> 

    @* // reference the minified version of our combined css based on whether we are in debug mode. *@ 
    @if (jQueryMobileTemplate.MvcApplication.IsDebug) 
    { 
    @* <link rel="stylesheet" href="@Url.Content("~/css/style.css?v=2")" />*@ 
    <link rel="stylesheet" href="@Url.Content("~/css/custom%20themes/electric1.css?v=2")" /> 

    } 
    else 
    { 
    @* <link rel="stylesheet" href="@Url.Content("~/css/style.min.css?v=2")" />*@ 
     <link rel="stylesheet" href="@Url.Content("~/css/custom%20themes/electric1.min.css?v=2")" /> 


    } 

    <!-- Grab Google CDN's jQuery. fall back to local if necessary --> 
    <!-- We put these at the top because jquery mobile applies styles before the page finishes loading --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> 


    </script> 
    <script>  window.jQuery || document.write("<script src='@Url.Content("~/js/libs/jquery-1.6.1.min.js")'>\x3C/script>")</script> 

    <!-- Pre jQuery Mobile init scripts for overriding defaults --> 
    <script> 

    </script> 

    <!-- Load jQuery Mobile from jquery cdn, get latest builds --> 
    <script src="//code.jquery.com/mobile/latest/jquery.mobile.min.js"> 

    </script> 
    @* <!-- Optionally, load from local site --> 
    <script src="@Url.Content("~/js/libs/jquery.mobile-1.0b1.js")"></script> 
    *@ 

    @RenderSection("HeadContent", false) 

    @*<script src="@Url.Content("~/js/libs/modernizr-2.0.min.js")"></script> 
    <script src="@Url.Content("~/js/libs/respond.min.js")"></script>*@ 


</head>

我试过它在我的“浏览”视图的底部以及但没有。我只想“浏览”视图来执行此代码。

来源

2012-07-25 Nick LaMarca

你的DOM中是否有'id =“indexPage”'元素？如果Page.Id为空，我发现你正在分配'string.Empty'。如果你没有这样的元素，'$（“＃indexPage”）'不会做太多事情。 – 2012-07-26 06:43:41

我正在使用mvc jqm手机模板。你是对的，有一个空字符串作为页面ID。页面标识在布局视图中设置为string.empty。如何将浏览视图的id设置为“indexPage”页面是WebBasePage动态变量。我怎样才能将它设置为“indexPage” – 2012-07-26 13:38:05

由于某种原因，当我使用asp.net-mvc时，pageinit事件从未正确地适用于我。您可以尝试使用page change events（pagebeforechange或pagechange）之一。

来源

2012-07-26 13:42:45 Alejo

在移动MVC网站执行jquery

回答

相关问题