我正在使用IF jQuery移动设备进行数据传输=" slide"。那正常工作，每个加载的页面都是其自己的页面，而不是选项卡数据滑块（如果有任何区别）
在滑块过渡加载页面后，我试图在页面上进行一些JavaScript触发器。我有一个JS文件，可以设置控件的最大高度 - 如果我在页面上并刷新它，则可以正常工作，但是如果滑动过渡加载，则JavaScript不会射击。我已经在Pageinit，Pageload等尝试过，但没有任何触发。
任何人都可以在这里指出问题。app.js
$(document).ready(function () {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
$(document).on("pageinit", function (event) {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
$(document).off('pageshow');
$(document).on('pageshow', function (e, ui) {
// generally written in pagechange event.
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
基本MVC布局页
@{
ViewData["Logo"] = "bird.png";
ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="Robots" content="noindex" />
<title>@ViewBag.SiteTitle</title>
<link rel="icon" type="image/x-icon" href="~/img/@ViewBag.Icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<environment names="Development">
<!-- Dev uses full file versions for de-bugging -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</environment>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/styles/all/all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
<link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
<script type="text/javascript">
</script>
@RenderSection("Scripts", false)
</head>
<body>
<div data-role="page">
<div id = "header" data-role="header" data-id="persistent" data-position="fixed">
<div id="headnav" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-toggle navbar-text" data-toggle="collapse">
<h3 class="title">@ViewBag.Title</h3>
<h5 class="subtitle">@ViewBag.SubTitle</h5>
</div>
<div class="navbar-left" rel="home" href="#" title="@ViewBag.SiteTitle">
<a href="@Url.Action("Index", "App")" title="Home">
<img style="max-width:100px; max-height: 100px; margin-top: 5px"
src="~/img/@ViewBag.Logo">
</a>
</div>
<div class="navbar-collapse collapse navbar-text">
<h3 class="title">@ViewBag.Title</h3>
<h5 class="subtitle">@ViewBag.SubTitle</h5>
</div>
<!-- Logout Box -->
<div class="pull-right">
@await Component.InvokeAsync("Logout")
</div>
</div>
</div>
</div>
<!-- content -->
<div id="maincontent" data-role="content">
@RenderBody()
</div>
<footer id="pagefooter" data-id="persistent" data-position="fixed">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<ul class="nav navbar-nav">
<li><a data-transition="slide" href="@Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="@Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="@Url.Action("Holidays", "App")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="@Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="@Url.Action("Tasks", "App")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="@Url.Action("Requests", "App")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>
</div>
@*<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="footer-bar-btns visible-xs">
<li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text">Link 1</i></a></li>
<li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text">Link 2</i></a></li>
<li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text">Link 3</i></a></li>
</ul>
</div>*@
</div>
</div>
</footer>
</div>
<!-- overriding customer styles -->
<link href="~/styles/customstyles.css" rel="stylesheet" />
<script src="~/app.js"></script>
</body>
</html>
最终用CSS对此进行了排序。
知道顶部和底部菜单栏的高度意味着我可以设置以下内容：
#maincontent {
position: fixed;
top: 120px;
bottom: 70px;
left: 0;
right: 0;
width:100%;
}
现在没有重叠，我可以在浏览器中自由调试我的网站，并且在任何设置上看起来都正确。