私は新しいjqueryモバイルなので、チュートリアルを探しに行き、いくつかを見つけて、独自のゴルフスコアリングUIを作成しました。最後の部分までうまく機能します。ホームボタンとすべてのページに表示されるボタンについてのフッターを配置したいのですが、どうやらここに表示されていないのは私のコードです
<!DOCTYPE html>
<html>
<head>
<title>Golf Score</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="jq/jquery.js"></script>
<script src="jq/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css"></style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#newgame').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#viewscore').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
$('#currentscore').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
$('#previousscore').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
$('#about').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
});//]]>
</script>
</head>
<body>
<div data-role="page" id="home" >
<div data-role="content" name="contentlogin">
<div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Home</h1>
</div>
<a href="#newgame" data-role="button" id="login">New Game</a>
<a href="#viewscore" data-role="button">View Score</a>
</div>
</div>
<div data-role="page" id="newgame" >
<div data-role="content">
<div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">New Game</h1>
</div>
<div data-role="fieldcontain">
<label for="textarea2">
Golf Club
</label>
<textarea name="" id="textarea2" placeholder="Golf Club"></textarea>
</div>
<div data-role="fieldcontain">
<label for="textarea1">
Golf Course
</label>
<textarea name="" id="textarea1" placeholder="Golf Course"></textarea>
</div>
<div data-role="fieldcontain">
<label for="selectmenu1">
Number of Players
</label>
<select id="selectmenu1" name="">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="selectmenu2">
Number of Holes
</label>
<select id="selectmenu2" name="">
<option value="9">
9
</option>
<option value="18">
18
</option>
<option value="27">
27
</option>
<option value="36">
36
</option>
<option value="45">
45
</option>
<option value="54">
54
</option>
</select>
</div>
</div>
</div>
<div data-role="page" id="viewscore" >
<div data-role="content" name="contentlogin">
<div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">View Score</h1>
</div>
<a href="#currentscore" data-role="button">Current</a>
<a href="#previousscore" data-role="button">Previous</a>
</div>
</div>
<div data-role="page" id="currentscore" >
<div data-role="content" name="contentlogin">
<div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Current Score</h1>
</div>
</div>
</div>
<div data-role="page" id="previousscore" >
<div data-role="content" name="contentlogin">
<div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Previous Score</h1>
</div>
</div>
</div>
<div data-role="page" id="about" >
<div data-role="content" name="contentlogin">
<div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">About</h1>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
<a data-role="button" href="#about" class="ui-btn-left">
About
</a>
<a data-role="button" href="#home" class="ui-btn-right">
Home
</a>
</div>
</body>
</html>