HTML5技术

html5+jqueryMobile编写App推广注册页 - L-H

字号+ 作者:H5之家 来源:H5之家 2016-11-08 10:00 我要评论( )

html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jqueryMobile你会立刻上手。html5比html4多了很多的标签,特别是多媒体这块有了很好的支持,但是如果只

html5+jqueryMobile的组合可以直接开发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">
<!--data-role="header"这个特性你想成APP的navigationbar -->
<div data-role="header"></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 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

     <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

      上面的库都是直接通过链接地址引入的,等会我直接贴代码,如果想看效果,可以直接copy代码到一个html页面直接打开就可以运行。

 

二、整页代码

   

Insert title here () { document.body.clientHeight; ; ; ; }); }); }); ; () { ) { }); ; 26 return; 27 } ) { }); ; 31 return; 32 } ); 34 35 }); document.body.clientHeight; ; ; ; }); }); }); }); () { () { ).val(); ).val(); ; re.test(name)) { ) 64 return; 65 } ) { ) 68 return; 69 } ); )) { ) 73 return; 74 } alertVerifyCodeMethod(); }); 84 }); () { () { ).val(); ).val(); ).val(); ).val(); ; ; ) { ) 101 return; 102 } ) { ) 106 return; 107 } re.test(phonenumber)) { ) 111 return; 112 } mre.test(safemail)) { ) 116 return; 117 } ); )) { ) 122 return; 123 } , name, password, phonenumber, safemail); }); 133 }); alertVerifyCodeMethod() { (document.all) { ).click(); 141 } 142 else { ); ); ).dispatchEvent(e); 146 } 147 } shareAjaxMethord(index, name, password, phone, email) { $.ajax({ , , , email, , (returnDate) { ) { ) 164 { ); 166 167 } { ); 171 } 172 } ) { 174 175 } 176 else { 177 178 } 179 180 } 181 }); 182 } 首页>手机在线注册使用手机后注册后立刻赠送100乐币! 手机号: &nbsp;&nbsp;码: 打勾注册表示你同意本公司的服务条例!立即注册普通注册(非手机)电话:400-900-8000渝ICP备000000-c号版权所有首页>普通用户在线注册 帐 号: &nbsp;&nbsp;码: 手机号: 安全邮箱: 打勾注册表示你同意本公司的服务条例!立即注册 手机注册(手机号)电话:400-900-8000渝ICP备000000-c号版权所有输入验证码 验证码: 确 定

上面的代码直接copy到一个html页面可以运行。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 结合WebSocket编写WebGL综合场景示例 - ljzc002

    结合WebSocket编写WebGL综合场景示例 - ljzc002

    2016-11-07 12:00

  • DIV+CSS:如何编写代码才能更有效率 - 2778085001

    DIV+CSS:如何编写代码才能更有效率 - 2778085001

    2016-06-29 15:00

  • 在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案 -

    在nodeJs的Express框架下用TypeScript编写router路由出现import关键

    2016-05-16 10:00

  • HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布

    HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布

    2016-03-11 15:56

网友点评
s