jQuery Mobile是一個非常強大的移動端開發(fā)框架,通過它,我們可以快速地實現(xiàn)各種常用的移動端界面效果,例如:上拉加載,下拉刷新,頁面轉(zhuǎn)場等等。
下面,我們來看一個利用jQuery Mobile開發(fā)的實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile 實例</title>
<link rel="stylesheet" >
<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>Header</h1>
</div>
<div data-role="content">
<a href="#popup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">彈出層</a>
<div data-role="popup" id="popup1">
<p>這是一個彈出層</p>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
上述代碼實現(xiàn)了一個簡單的彈出層效果,用戶點擊頁面中的鏈接時,彈出層就會出現(xiàn)。
在代碼中,我們先通過meta標簽設(shè)置了移動端界面的視口,然后引入了jQuery Mobile的CSS和JS文件,接著創(chuàng)建了一個包含頭部、內(nèi)容區(qū)和底部的頁面,內(nèi)容區(qū)內(nèi)嵌入了一個彈出層,通過設(shè)置href屬性和data-rel屬性實現(xiàn)了彈出層的觸發(fā)。
通過上面實例,我們可以看出,jQuery Mobile開發(fā)非常方便快捷,是移動端開發(fā)的理想選擇。