使用jqMobi開發app基礎 · jqMobi開發app基礎

app開發作為一種新的趨勢，在app開發中有很多中框架，而appframework作為jquery mobel版的改進版，比jquery 更快，體積跟小，而且兼容各種設備，前端采用htm5。使用appframework開發app，其實很簡單。定義簡單的app ~~~ <head> <title>App Framework single page</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="appframework-2.0/css/icons.css" /> <link rel="stylesheet" type="text/css" href="appframework-2.0/css/afui.css" /> ~~~ 引入相應的js ~~~ <script type="text/javascript" src="appframework.js"></script> <script type="text/javascript" src="ui/appframework.ui.min.js"></script> ~~~ 添加頭部 ~~~ <div id="header"> <h1>Single Page App</h1> </div> ~~~ 添加內容： ~~~ <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> ~~~ 添加頁腳： ~~~ div id="navbar"> <a href="#home" id='navbar_home' class='icon home'>home</a> <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a> <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a> </div> ~~~ 效果預覽 ![](https://box.kancloud.cn/2016-02-23_56cbb4b47e7d8.jpg) ![](https://box.kancloud.cn/2016-02-23_56cbb4b82d33a.jpg) 頭部，內容，頁腳都是可以變化的。在內容的左邊還可以顯示可自動隱藏菜單。頭部和頁腳可以根據內容的不同自動變換。 [官方教程](http://software.intel.com/en-us/html5/articles/getting-started-with-intel-app-framework-20-beta) [官方api文檔](http://app-framework-software.intel.com/api2/) [官方簡介](http://app-framework-software.intel.com/documentation.php)