<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 應用程式</title>
<link href="jquery-mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.11.2.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>在此處插入标題</h1>
</div>
<div data-role="content">
<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
<input type="button" value="Button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
<div data-role="footer">
<h1>在此處插入頁腳文本</h1>
</div>
</div>
</body>
</html>
- Basic markup基本标記
<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
<input type="button" value="Button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
- Corners邊界
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<button class="ui-btn ui-corner-all">Button</button>
- Shadow陰影
<a href="#" class="ui-btn ui-shadow">Anchor</a>
<button class="ui-btn ui-shadow">Button</button>
- Inline内嵌
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>
- Theme主題
<a href="#" class="ui-btn">Anchor - Inherit</a>
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A(主題樣本A)</a>
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B(主題樣本B)</a>
<button class="ui-btn">Button - Inherit</button>
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>
- Icons圖示
<a href="#" target="_blank" rel="external nofollow" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a> <button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>
jquery-mobile按鈕