jqMobi开发app页面注意事项 · jqMobi开发app基础

使用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">  </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> ~~~ [官方文档](http://app-framework-software.intel.com/documentation.php#afui/afui_layout)