<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ch6_4_4.htm</title>
<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<style>
.ui-icon-phone-call {
background-image : url(phone_call.gif);
}
.ui-icon-phone-on {
background-image : url(001.png);
}
.ui-icon-phone-silent {
background-image : url(002.png);
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Ch6_4_4</h1>
</div>
<div data-role="content">
<p>在巡覽工具列按鈕使用自訂圖示</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="phone-call">打電話</a></li>
<li><a href="#" data-icon="phone-on">習慣左手</a></li>
<li><a href="#" data-icon="phone-silent">習慣右手</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>