天天看點

webapp開發——jqmobi架構的快速使用

<!DOCTYPE html>
 
<html>
<head>
    <title>快速開始jqmobi</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" type="text/css" href="build/css/icons.css" target="_blank" rel="external nofollow"  />
    <link rel="stylesheet" type="text/css" href="build/css/af.ui.css" target="_blank" rel="external nofollow"  />
 
    <script type="text/javascript" charset="utf-8" src="build/ui/appframework.ui.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="build/af.plugins.min.js"></script>
 
    <!-- <script>
        if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
            var script = document.createElement("script");
            script.src = "plugins/af.desktopBrowsers.js";
            var tag = $("head").append(script);
            $.os.android = true; //let's make it run like an android device
            $.os.desktop = true;
        }
    </script> -->
    <!-- 上面這個是jqmobi的桌面模拟觸摸插件,注意這個插件會導緻js執行兩次。是以正式使用請删除 -->
 
    <script type="text/javascript">
 
        var webRoot = "./";
        $.ui.autoLaunch = false; //關閉自動初始化,使用歡迎頁面【進入的時候見到的黑底加載頁面】
        /* 這裡是監聽節點加載完畢之後初始化架構.*/
        var init = function () {
            $.ui.backButtonText = "Back";
            window.setTimeout(function () {
                $.ui.launch();
            }, 1500);
        };
         
        document.addEventListener("DOMContentLoaded", init, false);
 
    </script>
     
</head>
 
<body>
 
<div id="afui">
 
    <div id="splashscreen" class='ui-loader heavy'>
        <br>
        <br>
        <p>我是進入歡迎頁,這裡可以結合上面的初始化js,來制作歡迎頁</p>
        <br>
        <br>
        <span class='ui-icon ui-icon-loading spin'></span>
        <br>
        <br>
        <h1>正在努力加載中。。。</h1>
    </div>
 
    <!-- 這個是頁頭菜單 -->
    <div id="header">
        <a href="javascript:$.ui.toggleLeftSideMenu()" target="_blank" rel="external nofollow"  class="button" style="float:right">Toggle Nav</a>
    </div>
     
    <div id="content">
        <!-- 這裡是面闆 -->
        <!-- 面闆是jqmobi的重點,我們的内容都放在面闆中 -->
        <!--頁面都寫為一個面闆panel class="panel" -->
        <!-- title 可以控制頂部标題顯示的内容 -->
        <!-- selected="true" 預設選中,隻能存在一個 -->
        <!-- data-load="" 面闆顯示時加載的函數 -->
        <!-- data-unload="function" 面闆退出的時候(切換到别的頁面的時候)加載的函數 -->
        <!-- data-tab="ID" 控制預設底部菜單高亮 -->
        <!-- data-defer="xx.html" 為加載的頁面  -->
        <!-- data-transition="" 可選參數為 slide\up\down\pop\flip\fade -->
        <!-- data-nav="navid" 控制底部菜單 可選參數 ID或者none(不顯示) -->
        <!-- data-header="headerid" 控制底部菜單 可選參數 ID或者none(不顯示) -->
         
        <div data-title='這裡是header顯示的标題' id="main" class="panel" selected="true">
            這裡是頁面主題
        </div>
         
    </div>
     
    <!-- 這個是頁腳菜單 -->
    <div id="navbar">
        <div class="horzRule"></div>
        <a href="#main" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id='navbar_home' class='icon home'>home</a>
    </div>
     
    <!-- 下面是左側和右側的滑出菜單,不用的話可删除 -->
    <nav>
        <div class='title'>左側滑出菜單</div>
        <ul>
            <li ><a class="icon home mini" href="#main" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Selectors</a></li>
        </ul>
    </nav>
    <aside>
        <div class='title'>右側滑出菜單</div>
        <ul>
            <li ><a class="icon home mini" href="#main" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Selectors</a></li>
        </ul>
    </aside>
     
</div>
 
</body>
</html>
           

繼續閱讀