Я хотел бы знать, какие изменения в коде заставят его работать в jqm 1.4.2. Код из книги, которую я читаю на JQuery Mobile, написанной еще в 2012 году. Этот экзамен отлично работает, когда я использую jqm ver 1.0, но перерывы используя версию 1.4.2. код:
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel ="stylesheet" href ="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src ="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/> -->
// <!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
// <!-- <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> -->
<meta name ="viewport" content ="width = device-width, initial-scale = 1">
</head>
<body>
<div data-role ="page">
<div data-role ="header">
<h1> Dynamic page </h1>
</div>
<div data-role ="content">
<a id="button1" href ="javascript:addPages()"data-role ="button"> Add Pages </a>
<ul id="list1">
</ul>
</div>
</div>
<script>
function addPages() {
for (var i = 1; i < 5; i++) {
var page = $("<div>").jqmData("role", "page").attr("id", "page" + i);
// header
$("<div>").attr("data-role", "header").append($("<h1>").html("Page "+i+"</h1>")).appendTo(page);
// content
$("<div>").attr("data-role","content").append($("<p>")
.html("Contents for page " + i)).appendTo(page);
$("body").append(page);
$("<li>").append($("<a>").attr("href","#page" + i).html("Go to page" + i)).appendTo("#list1");
}
$("#button1").hide();
}
</script>
Вы можете копировать и запускать это, и он будет работать нормально. Если вы закомментируете cdn для css, jquery и jquery.mobile и раскомментируете следующие 3 последних версии. Заголовки отображаются на одной странице, которая отображается только на мгновение, а раздел содержимого - только для отображения.
Несколько мест для проверки.