網頁文章 javax.portlet.title.56

<!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>