<!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" /> <link rel="stylesheet" type="text/css" href="build/css/af.ui.css" /> <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()" 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" id='navbar_home' class='icon home'>home</a> </div> <!-- 下面是左侧和右侧的滑出菜单,不用的话可删除 --> <nav> <div class='title'>左侧滑出菜单</div> <ul> <li ><a class="icon home mini" href="#main">Selectors</a></li> </ul> </nav> <aside> <div class='title'>右侧滑出菜单</div> <ul> <li ><a class="icon home mini" href="#main">Selectors</a></li> </ul> </aside> </div> </body> </html>