jQuery Mobile是一款基于jQuery框架的移動端UI框架,能夠方便快速地創建支持響應式設計的移動應用。下面介紹一個使用jQuery Mobile的案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile 案例</title>
<link rel="stylesheet" >
<!-- 引入jQuery庫 -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile 案例</h1>
</div>
<div data-role="main" class="ui-content">
<p>這是一個簡單的jQuery Mobile案例。</p>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>第一個折疊面板</h3>
<p>第一個折疊面板的內容。</p>
</div>
<div data-role="collapsible">
<h3>第二個折疊面板</h3>
<p>第二個折疊面板的內容。</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>底部信息</h1>
</div>
</div>
</body>
</html>
以上代碼展示了一個基本的jQuery Mobile頁面結構。通過data-role屬性可以定義元素的角色,實現響應式設計、頁面轉場動畫、滑動手勢操作等。其中折疊面板(collapsible)是一種常見的頁面元素,通過改變展開狀態可以切換元素的可見性,實現頁面內容的隱藏和展示。
上一篇html5css鏈接代碼
下一篇用css來寫html