JQuery Mobile 實戰一

　　今天我們來使用JQuery Mobile來開發一個web mobile app。

　　要實現的如下所示效果：

　　開始：

　　第一步：添加JS包等引用，直接去官網下載最新的JQuery Mobile 包，http://jquerymobile.com/；或者直接從CDN引用JQuery Mobile。

　　解壓壓縮包：拷貝 jquery.min.js、jquery.mobile-1.4.5.css、jquery.mobile-1.4.5.js 文件到項目中。

　　第二步：新建一個 html 頁面。添加上面三個文件的引用。工程基本結構如下：

　　第三步：寫出基本頁面模板。

    <!-- Begin PageSingle -->
    <div data-role="page" id="pageSingle" >
        <div data-role="header" data-theme="b">
        <h1>單身管理</h1>
        <div data-role="navbar" >
            <ul>
                <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >單身</a></li>
                <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >非單身</a></li>
            </ul>
        </div>
        </div>

        <div data-role="content">
            <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="請輸入姓名或者年齡">
                <!-- 動態 顯示單身列表 -->                                                        
            </ul>
        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >單身管理</a></li>
                <li><a href="#pageSystem" data-transition="slide" data-icon="star" >系統消息</a></li>
                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系統設置</a></li>
            </ul>
        </div>
        </div> 
    </div> 
    <!-- End PageSingle -->

    <!-- Begin PageUnSingle -->
    <div data-role="page" id="pageUnSingle">
        <div data-role="header"  data-theme="b" >
        <h1>單身管理</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#pageSingle" data-transition="fade" data-theme="c" >單身</a></li>
                <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >非單身</a></li>
            </ul>
        </div>
            
        </div>

        <div data-role="content">
            <ul  id="unsingleList" data-role="listview" data-filter="true" data-filter-placeholder="請輸入姓名或者年齡">
                <!-- 動態 顯示非單身列表 -->
            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">單身管理</a></li>
                <li><a href="#pageSystem" data-transition="slide" data-icon="star">系統消息</a></li>
                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系統設置</a></li>
            </ul>
        </div>
        </div>

    </div> 
    <!--- End PageUnSingle-->

　　細節講解：

　　1. navbar 的 li 選項卡點擊時會高亮一下，如果想一直高亮着，給 li 添加樣式 class="ui-btn-active ui-state-persist"，這個樣式挺好用的。

　　2. footer 如果添加了 navbar ，請給這些 footer 們，添加相同 data-id="<id>" 屬性。這樣頁面切換的時候，footer 部分就不會跟頁面一起過渡了。

　　3. footer 想讓它固定在底部，不隨頁面內容上下滾動，可以給它添加 data-position="fixed" 屬性。這樣 footer 就會一直固定在底部了。

　　第四步：加載數據。Ajax的方式

    <script type="text/javascript">

        //AJAX服務調用地址
        var server_url = "http://192.101.109.71:80/TestWeb/";

        /** 頁面第一次初始化的時候加載列表 **/
        $(document).on("pageinit", "#pageSingle", function () {
            loadSingleList();
        });

        $(document).on("pageinit", "#pageUnSingle", function () {
            loadUnSingleList();
        });
        
        /** 每次頁面顯示時，重新加載列表  **/
        $(document).on("pageshow", "#pageSingle", function () {
            loadSingleList();
        });

        $(document).on("pageshow", "#pageUnSingle", function () {
            loadUnSingleList();
        });

        //單身列表頁面
        function loadSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getSingleStuInfo" }, function (data, textStatus) {

                $('#singleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#singleList").append('<li><a href="#"><h1>姓名：' + json[i].UserName + "</h1><p>年齡：" + json[i].Age + "</p></a></li>");
                }

                $("#singleList").listview('refresh');

            });
        }

        //非單身列表頁面
        function loadUnSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getUnSingleStuInfo" }, function (data, textStatus) {
                
                $('#unsingleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#unsingleList").append('<li><a href="#"><h1>姓名：' + json[i].UserName + "</h1><p>年齡：" + json[i].Age + "</p></a></li>");
                }

                $("#unsingleList").listview('refresh');

            });
        }

    </script>

　　細節講解：

　　1. 服務端提供的接口為 NET 的 一般處理程序，大家可以隨意，不一定用 NET 的，啥都可以，只要是接口就行。

　　2. pageinit 在頁面初始化的時候（頁面第一次打開的時候），請求加載服務端數據。pageshow 在每次頁面顯示的時候（每次頁面切換的時候），請求加載服務端數據

　　3. 每次要載數據時，記得要先要列表清空一下 remove()，要不然列表內容會一直遞增。大家可以去掉試試。

　　4. 列表加載完后，記得 listview('refresh') 刷新一下（只要是動態加載的數據，大家都要注意一下。動態加載的數據是沒有JQ的樣式的，JQ不會給它們渲染），這樣 JQueryMobile 的列表樣式才會重新渲染一下。大家可以不刷新試試。

第五步：點擊選項卡，顯示詳細頁面，並顯示學生信息二維碼 http://www.codesky.net/article/201308/182043.html 二維碼 js 文件下載。

html布局如下：

    <!-- Begin PageSingle -->
    <div data-role="page" id="pageSingle" >
        <div data-role="header" data-theme="b">
        <h1>單身管理</h1>
        <div data-role="navbar" >
            <ul>
                <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >單身</a></li>
                <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >非單身</a></li>
            </ul>
        </div>
        </div>

        <div data-role="content">
            <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="請輸入姓名或者年齡">
                <!-- 動態 顯示單身列表 -->                                                        
            </ul>
        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >單身管理</a></li>
                <li><a href="#pageSystem" data-transition="slide" data-icon="star" >系統消息</a></li>
                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系統設置</a></li>
            </ul>
        </div>
        </div> 
    </div> 
    <!-- End PageSingle -->

    <!-- Begin PageUnSingle -->
    <div data-role="page" id="pageUnSingle">
        <div data-role="header"  data-theme="b" >
        <h1>單身管理</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#pageSingle" data-transition="fade" data-theme="c" >單身</a></li>
                <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >非單身</a></li>
            </ul>
        </div>
            
        </div>

        <div data-role="content">
            <ul  id="unsingleList" data-role="listview" data-filter="true" data-filter-placeholder="請輸入姓名或者年齡">
                <!-- 動態 顯示非單身列表 -->
            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">單身管理</a></li>
                <li><a href="#pageSystem" data-transition="slide" data-icon="star">系統消息</a></li>
                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系統設置</a></li>
            </ul>
        </div>
        </div>

    </div> 
    <!--- End PageUnSingle-->
    
    <!-- Begin PageStuInfo -->
    <div data-role="page" id="pageStuInfo">
        <div data-role="header" data-theme="b">
            <a href="#" data-role="button" data-rel="back" data-icon="back">返回</a>
            <h1>學生信息</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label id="lbUserName"></label>
                <label id="lbAge"></label>
                <div id="code"></div>
            </div>
            
        </div>            
       </div>
    <!-- End PageStuInfo -->

  JS 代碼如下：

    <link rel="Stylesheet" href="src/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" src="src/jquery.js"></script>
    <script type="text/javascript" src="src/jquery.qrcode.min.js"></script>
    <script type="text/javascript">

        //AJAX服務調用地址
        var server_url = "http://192.101.109.71:80/TestWeb/";

        /** 頁面第一次初始化的時候加載列表 **/
        $(document).on("pageinit", "#pageSingle", function () {
            loadSingleList();
        });

        $(document).on("pageinit", "#pageUnSingle", function () {
            loadUnSingleList();
        });
        
        /** 每次頁面顯示時，重新加載列表  **/
        $(document).on("pageshow", "#pageSingle", function () {
            loadSingleList();
        });

        $(document).on("pageshow", "#pageUnSingle", function () {
            loadUnSingleList();
        });
        
        
        //單身列表頁面
        function loadSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getSingleStuInfo" }, function (data, textStatus) {

                $('#singleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#singleList").append('<li><a href="#" onclick="viewStuInfo(' + json[i].StudentID +')"><h1>姓名：' + json[i].UserName + "</h1><p>年齡：" + json[i].Age + "</p></a></li>");
                }

                $("#singleList").listview('refresh');

            });
        }

        //非單身列表頁面
        function loadUnSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getUnSingleStuInfo" }, function (data, textStatus) {
                
                $('#unsingleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#unsingleList").append('<li><a href="#" onclick="viewStuInfo(' + json[i].StudentID +')"><h1>姓名：' + json[i].UserName + "</h1><p>年齡：" + json[i].Age + "</p></a></li>");
                }

                $("#unsingleList").listview('refresh');

            });
        }

        /** 查看學生信息 **/
        function viewStuInfo(studentid){
            
            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getStuInfo", studentid: studentid }, function (data, textStatus) {
                
                var json = eval('(' + data + ')');

                $("#lbUserName").html("姓名：" + json.UserName);
                $("#lbAge").html("年齡：" + json.Age);
                
                $("#code").html("");
                
                //生成二維碼
                $("#code").qrcode({
                    render: "table", //table方式
                    width: 200, //寬度
                    height: 200, //高度
                    text: json.UserName //任意內容
                });
                
                $.mobile.changePage("#pageStuInfo", {
                    transition:"slide"
                });
                
            });
        }

    </script>
    <script type="text/javascript" src="src/jquery.mobile-1.4.5.js"></script>

　　

　　細節講解：

　　1. 頁面添加返回按鈕，兩種方法：a 標簽 + data-rel="back" data-icon="back"  或者 header 標簽 +  data-add-back-btn="true" data-back-btn-text="返回"。

　　2. 二維碼，直接下載 jquery.qrcode.min.js 包，添加引用，然后使用 qrcode 方法，看看例子就會明白的，很簡單。

　　結束語：好的，今天主要是介紹下使用 JQueyMobile 來開發一些基本的東西，挺簡單的，下次會結合 phonegap cordova 來開發。謝謝。