html5+jqueryMobile编写App推广注册页

本人开发的开发者技术变现资源聚集地,大家支持下，下面是网址

https://www.baiydu.com

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标签组合成的一个整体页面，当然它们都各自加了上面的特性。

<div data-role="page" id="phoneRegister">

<div data-role="header" id="heardId"></div>

<div data-role="content"> </div>

<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的支持库

上面的库都是直接通过链接地址引入的，等会我直接贴代码，如果想看效果，可以直接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="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>

 <title>Insert title here</title>

 <script type="text/javascript">

 $(document).on("pagecreate", function () {

     var contentHeight = document.body.clientHeight;

     var header = contentHeight * 0.1;

     var content = contentHeight * 0.75;

     var footer = contentHeight * 0.15;

     $("#phoneRegister #heardId").css({ 'height': header + 'px', 'background': '#4dbb49', 'line-height': header + 'px' });

     $("#phoneRegister #contentId").css({ 'height': content + 'px' });

     $("#phoneRegister #footerId").css({ 'height': footer + 'px', ' font-size': '70px', 'line-height': footer + 'px' });

     var flag = false;

     setInterval(function () {

         if (flag == false) {

             $("#presentGiftTitle").css({ 'color': 'rgb(255, 0, 0)' });

             flag = true;

             return;

         }

         if (flag == true) {

             $("#presentGiftTitle").css({ 'color': 'rgb(255, 102, 0)' });

             flag = false;

             return;

         }

     }, 100);

 });

 //当页面初始化完毕后

 $(document).on("pageshow", "#commonRegister", function () { // 当进入页面二时

     var contentHeight = document.body.clientHeight;

     var header = contentHeight * 0.1;

     var content = contentHeight * 0.75;

     var footer = contentHeight * 0.15;

     $("#commonRegister #heardId").css({ 'height': header + 'px', 'background': '#4dbb49', 'line-height': header + 'px' });

     $("#commonRegister #contentId").css({ 'height': content + 'px' });

     $("#commonRegister #footerId").css({ 'height': footer + 'px', 'font-size': '70px', 'line-height': footer + 'px' });

 });

 $(document).on("pageinit", "#phoneRegister", function () {

     $("#phoneRegisterClick").on("tap", function () {

         var name = $("#phoneRegister #name").val();

         var password = $("#phoneRegister #password").val();

         var re = /^(13[0-9]{9})|(15[89][0-9]{8})$/;

         if (!re.test(name)) {

             alert("请输入正确的手机号!")

             return;

         }

         if (password.length < 6) {

             alert("密码不能小于6位数")

             return;

         }

         var checkBox = $("#phoneRegister #Checkbox1");

         if (!checkBox.is(":checked")) {

             alert("请阅读条例!")

             return;

         }

         //开始发送手机验证

         alertVerifyCodeMethod();

     });

 });

 $(document).on("pageinit", "#commonRegister", function () {

     $("#commonRegisterClick").on("tap", function () {

         var name = $("#commonRegister #name").val();

         var password = $("#commonRegister #password").val();

         var phonenumber = $("#commonRegister #phoneNumber").val();

         var safemail = $("#commonRegister #safeMail").val();

         var re = /^(13[0-9]{9})|(15[89][0-9]{8})$/;

         var mre = /\w@\w*\.\w/;

         if (name.length < 6) {

             alert("注册用户名不能小于6位数!")

             return;

         }

         if (password.length < 10) {

             alert("密码不能小于10位数")

             return;

         }

         if (!re.test(phonenumber)) {

             alert("请输入正确的手机号!")

             return;

         }

         if (!mre.test(safemail)) {

             alert("请输入正确的邮箱!")

             return;

         }

         var checkBox = $("#commonRegister #Checkbox1");

         if (!checkBox.is(":checked")) {

             alert("请阅读条例!")

             return;

         }

         shareAjaxMethord(0, name, password, phonenumber, safemail);

     });

 });

 function alertVerifyCodeMethod() {

     if (document.all) {

         document.getElementById("alertVerifyCodeBox").click();

     }

     else {

         var e = document.createEvent("MouseEvents");

         e.initEvent("click", true, true);

         document.getElementById("alertVerifyCodeBox").dispatchEvent(e);

     }

 }

 function shareAjaxMethord(index, name, password, phone, email) {

     $.ajax({

         type: "POST",

         async: false,

         dataType: "text",

         data: "&sgin=" + index + "&name=" + name + "&password=" + password + "&phone=" + phone + "&email=" + email,

         url: "ajaxMediumPage.ashx",

         success: function (returnDate) {

             if (index == 0) {

                 if(returnDate=="1")

                 {

                     alert("注册成功!");

                 }

                 else

                 {

                     alert("注册失败!");

                 }

             }

             else if (inedx == 1) {

             }

             else {

             }

         }

     });

 }

 </script>

 </head>

 <body>

     <!-- 这个div data-role="page"表明它是一个页面 -->

     <div data-role="page" id="phoneRegister">

         <div data-role="header" id="heardId">

    <div style="margin-left:20px; font-size:17px;   font-weight:bold"><a href="#pagetwo" style="color:white; text-decoration:none;">首页>手机在线注册</a></div>

         </div>

         <div data-role="content" id="contentId">

                 <section id="posts">

                     <article class="post">

                         <header>

                             <h4 id="presentGiftTitle">使用手机后注册后立刻赠送100乐币!</h4>

                         </header>

                         <aside>

                             手机号:

                             <input id="name" type="text" placeholder="请输入注册帐号!" />

                         </aside>

                         <aside>

                             密&nbsp;&nbsp;码:

                             <input id="password" type="password" placeholder="请输入注册密码!" />

                         </aside>

                         <aside>

                             <div style="margin-left:-15px;">

                                 <div style="width: 20px;   height: 20px; float:left;  margin-top:5px;"> <input id="Checkbox1" style="width: 18px; height: 18px;" type="checkbox" /></div>

                                 <div style="margin-left:40px;"><h5>打勾注册表示你同意本公司的服务条例!</h5></div>

                             </div>

                         </aside>

                         <aside style="margin-top:20px;">

                             <div id="phoneRegisterClick" style="text-align: center; border: 1px solid #666666; background: #4dbb49; color: white; height: 30px; width: 100px; line-height: 30px; ">立即注册<a href="#dialog" id="alertVerifyCodeBox" data-rel="dialog" style="display:none"></a>  </div>

                         </aside>

                         <aside style="margin-top:20px;">

                             <div style="float:right"><a href="#commonRegister" data-transition="flip">普通注册(非手机)</a></div>

                         </aside>

                         <footer></footer>

                     </article>

                 </section>

         </div>

         <div data-role="footer" id="footerId" style="background:#666666;">

             <div style="width:100%;height:90%;text-align:center;">

                 <div style="font-size:13px; height:25%;text-decoration:none;margin-top:0px;padding-top:0px; line-height:16px;">电话:400-900-8000</div>

                 <div style="font-size: 13px; height: 25%; text-decoration:none;margin-top: 0px; padding-top: 0px; line-height:16px;">渝ICP备000000-c号</div>

                 <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height: 16px;">版权所有</div>

             </div>

         </div>

     </div>

 <!-- 这个div data-role="page"表明它是一个页面 -->

     <div data-role="page" id="commonRegister">

         <div data-role="header" id="heardId">

             <div style="margin-left:20px; font-size:17px;   font-weight:bold"><a href="#pagetwo" style="color:white; text-decoration:none;">首页>普通用户在线注册</a></div>

         </div>

         <div data-role="content" id="contentId">

                 <section id="posts">

                     <article class="post">

                         <aside>

                             帐 号:

                             <input id="name" type="text" placeholder="请输入注册帐号!" />

                         </aside>

                         <aside>

                             密&nbsp;&nbsp;码:

                             <input id="password" type="password" placeholder="请输入注册密码!" />

                         </aside>

                         <aside>

                             手机号:

                             <input id="phoneNumber" type="text" placeholder="请输入手机号!" />

                         </aside>

                         <aside>

                             安全邮箱:

                             <input id="safeMail" type="text" placeholder="请输入安全邮箱!" />

                         </aside>

                         <aside>

                             <div style="margin-left:-15px;">

                                 <div style="width: 20px;   height: 20px; float:left;  margin-top:5px;"> <input id="Checkbox1" style="width: 18px; height: 18px;" type="checkbox" /></div>

                                 <div style="margin-left:40px;"><h5>打勾注册表示你同意本公司的服务条例!</h5></div>

                             </div>

                         </aside>

                         <aside style="margin-top:20px;">

                             <div id="commonRegisterClick" style="text-align:center;border:1px solid #666666; background:#4dbb49;color:white;height:30px;width:100px; line-height:30px;">立即注册 </div>

                         </aside>

                         <aside style="margin-top:20px;">

                             <div style="float:right"><a href="#phoneRegister" data-transition="flip">手机注册(手机号)</a></div>

                         </aside>

                         <footer></footer>

                     </article>

                     </section>

         </div>

         <div data-role="footer" id="footerId" style="background:#666666;">

             <div style="width:100%;height:90%;text-align:center;">

                 <div style="font-size:13px; height:25%;text-decoration:none;margin-top:0px;padding-top:0px; line-height:16px;">电话:400-900-8000</div>

                 <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height:16px;">渝ICP备000000-c号</div>

                 <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height: 16px;">版权所有</div>

             </div>

         </div>

     </div>

     <div data-role="page" id="dialog" style="padding-top:auto">

         <div data-role="header" id="heardId" style="background:#4dbb49">

             <h1>输入验证码</h1>

         </div>

         <div data-role="content" id="contentId">

             <aside>

                 验证码:

                 <input id="verifyCode" type="text" placeholder="请输入验证码!" />

             </aside>

             <aside>

                 <div id="inputVerifyCodeDiv" style="width: 100px; height: 30px; background: #4dbb49; color:white; line-height:30px; float:right; text-align:center">确 定</div>

             </aside>

         </div>

         <div data-role="footer" id="footerId" style="background:#4dbb49">

             <h1></h1>

         </div>

     </div>

 </body>

 </html>

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

本人创业做的一款androidApp, 下载量已经有2000多万,各种当前热门的网络手机奖励红包全部集成，另外还有热门电影和淘宝高额优惠券！很适合各类型的用户。

html5+jqueryMobile编写App推广注册页的更多相关文章

HTML5 Plus移动App(5+App)开发入门指南
HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...
html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
【扫盲】HTML5、Web APP、3G网站、Wap网站傻傻分不清楚
移动互联网指手机网站和app,其中app分为native app(原生app),web app(html5开发),Hybrid app(前两种app结合):手机网站分为wap网站和3g网 ...
移动互联网App推广的十大难题
常常有朋友来问."我做了一个App,请问怎么推广啊?"或者就是"我们公司开发了一个App.想短时间内获取巨大的量."还有的就是问"有没有什么好渠道三个 ...
html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody
最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...
APP推广入门之AppStore数据分析
AppStore中有很多数据,但对于一个App推广者而言,最需要关注的无非这么几个,即下载量.评论.权重.榜单排名.搜索排名以及热词搜索等.至于这些数据具体代表着什么,下面就先由下载量开始,来简单介绍 ...
[转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
史上最全APP推广渠道
群主做App推广的过程中,有过失败也尝过成功的甜头,渐渐地在APP推广尤其是渠道推广中积累了一些实战经验想同大家分享.如果各位有更好的推广建议,欢迎沟通分享哦! 一.应用商店推广 1.应用市场 ...
ECSHOP在线手册布局参考图--登录/注册页 user_passport.dwt
A.会员登录框 1,设置方法自带模块 2,代码相关 user_passport.dwt 中 <div class="usBox_1 f_l"> <div ...

随机推荐

WPF 普通属性变化通知
问题描述:使用ObservableCollection<OrderItem> source 给Datagrid.ItemsSource赋值,在后台更新source集合后,前台Datagri ...
Android Studio开发RecyclerView遇到的各种问题以及解决（一）
以前一直在用ListView,,,最近才看RecyclerView发现好强大.RecyclerView前提是Android版本在5.0以上,本人以前用的是eclipse只支持到4.4.索性就安装一个A ...
Centos6.5 配置Nginx开机自启动
1.在/etc/init.d/目录下创建 nginx 文件,内容如下: #!/bin/sh # # nginx - this script starts and stops the nginx dae ...
Linux环境下常见漏洞利用技术(培训ppt+实例+exp)
记得以前在drops写过一篇文章叫 linux常见漏洞利用技术实践 ,现在还可以找得到(https://woo.49.gs/static/drops/binary-6521.html), 不过当时开始 ...
BZOJ 3083: 遥远的国度 [树链剖分 DFS序 LCA]
3083: 遥远的国度 Time Limit: 10 Sec Memory Limit: 1280 MBSubmit: 3127 Solved: 795[Submit][Status][Discu ...
【腾讯Bugly干货分享】基于RxJava的一种MVP实现
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bfef673c1174283d60bac0 Dev Club 是一个交流移动 ...
string length() 方法注意点
突然意识到string length() 是跟文件的字符编码相关的测试了下, 果然如此: 对于常见字, 结果是一样的, System.out.println("T中国123".l ...
【原】得心应手小工具开发——IE代理快速切换工具
一.引入因为公司里上外网要经常换IE代理地址,每次切换地址都要进到Internet Options里去设置一番,经常切换的话很是麻烦,由于用了点时间作个小工具来方便自己. 二.实现思路其实思路很简 ...
Atitit Data Matrix dm码的原理与特点
Atitit Data Matrix dm码的原理与特点 Datamatrix原名Datacode,由美国国际资料公司(International Data Matrix, 简称ID Matrix)于 ...
HTML5知识点总结
HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...

html5+jqueryMobile编写App推广注册页

html5+jqueryMobile编写App推广注册页的更多相关文章

随机推荐

热门专题