jQuery Mobile和HTML5的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jqueryMobile你会立刻上手。
html5比html4多了很多的标签,特别是多媒体这块有了很好的支持,但是如果只是做一般的web手机页面,那么多数标签是用不上的,JqueryMobile与jquery的不同点就在一些事件名称上,当然这里封装的也是html5的原生事件,还要说一个关于html5提倡的一个规则,这里jquerymobile是遵循了这个规则的, html5里面给标签增加几个新的权限特征, data-role="page"、 data-role="header" 、data-role="content"、 data-role="footer", 为什么html5会增加这几个特征,我觉得多是为支持web版手机app开发而出的,因为html5提倡开发web版app只创建一个html页,然后每个段落=一个新页面,下面我贴一段几个div标签组合成的一个整体页面,当然它们都各自加了上面的特性。
<!--data-role="page"表示这个是一个html5单独页面,可以从另外一个加了page特性的div打开它 --> <div data-role="page" id="phoneRegister"> <!--data-role="header"这个特性你想成APP的navigationbar --> <div data-role="header" id="heardId"></div> <!--data-role="content"内容里面展示页面内容的,必入你放一张表在这个标签里面展示 --> <div data-role="content"> </div> <!--data-role="footer"这个特性你想成APP的tabbar --> <div data-role="footer"> </div> </div>
上面的div其实就组合成了一个html5页面了。
一、页面注意事项
1. 首先html5标准页面申明,页面中的第一行代码与html4不一样,
html5:<!DOCTYPE>
html4:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
此标签的作用是告诉浏览器支持什么html规范。
2.引入jquery和jquerymobile的支持库
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">
上面的库都是直接通过链接地址引入的,等会我直接贴代码,如果想看效果,可以直接copy代码到一个html页面直接打开就可以运行。
二、整页代码
<!DOCTYPE> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">上面的代码直接copy到一个html页面可以运行。
以上所述是小编给大家介绍的jQuery Mobile和HTML5开发App推广注册页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!