jQuery Mobile是一款基于jQuery框架的移動(dòng)端UI框架，能夠方便快速地創(chuàng)建支持響應(yīng)式設(shè)計(jì)的移動(dòng)應(yīng)用。下面介紹一個(gè)使用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>這是一個(gè)簡單的jQuery Mobile案例。</p>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>第一個(gè)折疊面板</h3>
<p>第一個(gè)折疊面板的內(nèi)容。</p>
</div>
<div data-role="collapsible">
<h3>第二個(gè)折疊面板</h3>
<p>第二個(gè)折疊面板的內(nèi)容。</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>底部信息</h1>
</div>
</div>
</body>
</html>以上代碼展示了一個(gè)基本的jQuery Mobile頁面結(jié)構(gòu)。通過data-role屬性可以定義元素的角色，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)、頁面轉(zhuǎn)場動(dòng)畫、滑動(dòng)手勢操作等。其中折疊面板(collapsible)是一種常見的頁面元素，通過改變展開狀態(tài)可以切換元素的可見性，實(shí)現(xiàn)頁面內(nèi)容的隱藏和展示。
上一篇html5css鏈接代碼
下一篇用css來寫html