jqMobi开发app页面注意事项

最新推荐文章于 2021-06-01 07:30:21 发布

xuexiaodong2009

最新推荐文章于 2021-06-01 07:30:21 发布

阅读量6.7k

点赞数 2

分类专栏： app开发 jqMobi开发 jqMobi开发app基础

本文链接：https://blog.csdn.net/xuexiaodong009/article/details/18086265

版权

app开发同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

jqMobi开发

28 篇文章 0 订阅

订阅专栏

jqMobi开发app基础

28 篇文章 5 订阅

订阅专栏

使用App Framework UI开发app页面，作为一名初学者犯了很多错误。因此把这些错误和注意事项记录下来，但因为是初学，理解可能有一定错误。

由于页面的基本代码结构如下：

<!doctype html>
<html>
<head>
    <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" />
    <script type="text/javascript" src="appframework.js"></script>
   <script type="text/javascript" src="ui/appframework.ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/icons.css" />
    <link rel="stylesheet" type="text/css" href="css/af.ui.css" />
    <title>首页</title>
</head>
<body>
 <!-- 页面内容，包括头部，页脚，和内容等其他部分 -->
</body>
</html>

前后都很简单，只有中间部分又很短需要注意的，故再次只介绍中间部分的内容。

首先需要有一个div，并且id必须是afui，然后可以在这个div中间包含，头部，页脚和内容。

内容部分也是是div，并且id必须是content，然后可以在这个div中间放着很多的div。

头部也是div如果没有定义，则系统会自动生成一个头部。

页脚如果打算所有的panel共享，则id必须是navbar，如果没有定义共有的页脚，则页脚什么也不显示。

一个body部分基本完整的htm代码

<div id="afui">
    <div id="header">
        <!-- any additional HTML you want can go here -->
    </div>
    <div id="content">
         <div id="main" title="Welcome" class="panel" selected="true" data-nav="main_nav">
 
        </div>
    </div>
    <div id="navbar">
       <a target="#welcome" class="icon home">Home</a>
    </div>
 
    <nav id="main_nav">
        <div class='title'>Home</div>
        <ul>
            <li ><a class="icon home mini" href="#main">Home</a></li>
        </ul>
    </nav>
</div>

官方文档