0
Я использую, если JQuery mobile для его передачи данных = «слайд». Thats working fine, каждая загруженная страница - это ее собственная страница, а не ползунки данных вкладки (если это имеет значение)JQuery Мобильное событие перехода не срабатывает
Я пытаюсь запустить 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';
});
Base 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>
Мне просто нужен способ настроить несколько JS после загрузки новой страницы. Никто ничего не имеет – Monolithcode