使用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)