移動端開發-JqueryMobile實戰(一)

又來寫一篇教程,是因爲最近在圖書館看到了一本書《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>

然後界面就是這樣
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章