Question

我正在使用visual studio中的jquery移动模板。在我的布局视图中，我有以下标记

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

当我的浏览视图呈现时，我想将数据全屏属性更改为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>

我在“浏览”视图的底部尝试了它，但没有。我只想要“浏览”视图来执行此代码。

Answer 1

当我使用asp.net-mvc时，由于某些原因，pageinit事件对我来说从未正常工作。您可以尝试使用其中一个page change events（pagebeforechange或pagechange）。

在移动MVC站点中执行Jquery

1 个答案: