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

   效果预览使用jqMobi开发app基础详解手机开发

使用jqMobi开发app基础详解手机开发

头部,内容,页脚都是可以变化的。在内容的左边还可以显示可自动隐藏菜单。头部和页脚可以根据内容的不同自动变换。

官方教程

官方api文档

官方简介

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

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

相关推荐

发表回复

登录后才能评论