모바일 MVC 사이트에서 Jquery를 실행

visual studio에서 jquery 모바일 템플릿을 사용하고 있습니다. 내 레이아웃보기에서 나는 다음과 같은 마크 업을 가지고모바일 MVC 사이트에서 Jquery를 실행

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

내 찾아보기가 내가 true로 데이터 전체 화면 attibute를 변경하려면 렌더링됩니다. 다음은이 코드가 참여 얻을 수없는 내가이 일을 사용하려고 시도하고있는 코드 ..

<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>

내 "찾아보기"보기의 맨 아래에서 시도했지만 아무것도 표시하지 않았습니다. "Browse"뷰에서이 코드를 실행하기 만하면됩니다.

출처

2012-07-25 Nick LaMarca

DOM에'id = "indexPage"'요소가 있습니까? Page.Id가 null 인 경우에'string.Empty'를 지정하는 것을 볼 수 있습니다. '$ ("# indexPage")'그런 요소가 없다면 많이하지 않을 것이다. –

mvc jqm 모바일 템플릿을 사용하고 있습니다. 페이지 이름으로 빈 문자열이 있습니다. 페이지 ID는 레이아웃보기에서 string.empty로 설정됩니다. "indexPage"에 대한 탐색보기의 id를 어떻게 설정합니까? Page는 WebBasePage 동적 변수입니다. 어떻게 이것을 "indexPage"로 설정할 수 있습니까? –

asp.net-mvc를 사용할 때 어떤 이유로 든 pageinit 이벤트가 제대로 작동하지 않습니다. 대신 page change events (pagebeforechange 또는 pagechange) 중 하나를 사용해보세요.

출처

2012-07-26 13:42:45 Alejo

모바일 MVC 사이트에서 Jquery를 실행

답변

관련 문제