0
코드에 대한 변경 사항이 jqm에서 작동하도록 만들었 으면합니다. 1.4.2 코드는 제가 읽은 책에서 가져온 것입니다. JQuery Mobile은 2012 년에 서면으로 작성되었습니다.이 시험판은 jqm ver 1.0을 사용할 때 잘 동작하지만 버전 1.4.2를 사용하면 문제가 없습니다. 코드 :jquery 모바일 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>
복사 본을 실행하고 잘 작동 할 수 있습니다. css, jquery 및 jquery.mobile의 cdn을 주석 처리하고 다음 3 개의 최신 버전의 주석을 제거하십시오. 머리글은 한 페이지에만 표시되며 콘텐츠 섹션은 표시 할 섹션입니다.