在移动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>
我试过它在我的“浏览”视图的底部以及但没有。我只想“浏览”视图来执行此代码。
答
由于某种原因,当我使用asp.net-mvc时,pageinit
事件从未正确地适用于我。您可以尝试使用page change events(pagebeforechange
或pagechange
)之一。
你的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