您的位置：首页 > 移动开发

appframework 快速开始

2014-10-28 10:04 134 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航