0

各ページ内で JavaScript を開始する方法を教えてください。ご不明な点がございましたら、お知らせください。http://jquerymobile.com/demos/1.2.0/docs/api/events.htmlのアドバイスに従いました

http://jsbin.com/ikemuh/3/

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta charset=utf-8 />
<script>


function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;


$("#clock").html(currentTimeString);

}
$(document).bind('pageinit', function() {
setInterval('updateClock()', 1000);
});
</script>

<title>Clock</title>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div data-role="page" id="page1">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page2">Finished!</a>
</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page3">Finished!</a>
</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page1">Finished!</a>
</p>
</div>
</div>
</body>
</html>
4

1 に答える 1

2

jQuery の通常の onDOMReady ( ) とは少し異なるイベントを探しています$(function() {})。ドキュメントのこのページを見てください。具体的には：

$(document).bind('pageinit', function() {
  //call to any JavaScript you want to run when your view is initialized
});

コードを見ると、実際にはいくつかの変更が必要であることがわかります (こちらはデモです)。最初に に切り替えましたpageshow。2 番目に、実際には ' ' の ID を持つ 3 つのスパンがあるClockため、クラス (IDはドキュメント内で一意である必要があります。jQuery Mobile は単一のドキュメントを使用して複数のページを表す必要があるため、クラスを探すように JavaScript を更新し (3 つのスパンすべてを変更します)、最後に setInterval を次のように置き換えました。

setInterval('updateClock()', 1000);

これに：

setInterval(updateClock, 1000);

eval は悪だから

于 2013-02-07T00:12:00.487 に答える