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"> 
        <!-- 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>

  官方文档


原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/5284.html

(0)
上一篇 2021年7月16日
下一篇 2021年7月16日

相关推荐

发表回复

登录后才能评论