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)