又來寫一篇教程,是因爲最近在圖書館看到了一本書《jQuery移動Web開發》,因爲以前沒有怎麼關注過移動端的開發,於是就把jQuery Mobile看了一下,並想根據書中最後一節講的創建一個RSS閱讀器應用程序。看看途中會不會遇到什麼坑。
index.html頁面,沒什麼可說的,感覺jQuery Mobile的樣式還挺好看的,使用data-role來指定page,header,content
<!DOCTYPE html>
<html>
<title>RSS Reader App</title>
<meta name="viewport" content="width=device-width,initialscale=1">
<!-- 這一行就是爲移動端所寫的 -->
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<body>
<div data-role="page" id="intropage">
<div data-role="header">
<h1>RSS Reader Application</h1>
</div>
<div data-role="content" id="introContent">
<p id="introContentNoFeeds" style="display: none">
Welcom to the Rss Reader Application.You do not Currently have any Rss Feeds.Please use 'Add Feed' Button below to begin.
</p>
<ul id="feedList" data-role="listview" data-inset="true" datalisplit-icon="delete">
</ul>
<a href="addfeed.html" data-role="button" data-theme="b">Add Feed</a>
</div>
<div datd-role="footer">
<h4>Created with jQuery Moile</h4>
</div>
</div>
</body>
<script>
$(document).on("pagecreate",'#intropage',function(e){
// init();
})
</script>
然後界面就是這樣