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 ...

随机推荐

c# Enumerable中Aggregate和Join的使用
参考页面: http://www.yuanjiaocheng.net/ASPNET-CORE/asp.net-core-environment.html http://www.yuanjiaochen ...
内存映射文件MemoryMappedFile使用
参考资料: http://blog.csdn.net/bitfan/article/details/4438458 所谓内存映射文件,其实就是在内存中开辟出一块存放数据的专用区域,这区域往往与硬盘上特 ...
新手学习web遇到的一些乱码问题
在新手学习web网站学习的时候经常会遇到?????这种乱码,对于刚起步的菜鸟来说真的很头痛,很容易打击继续学的信心当然了对于菜鸟的我最近也遇到过乱码问题,沉浸其中不能自拔,爱的深啊!!!!!我所遇到的 ...
Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法从问题截图上 ...
小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件，开源
用户反馈是小程序开发必要的一个功能,但是和自己核心业务没关系,主要是产品运营方便收集用户的对产品的反馈.HotApp推出了用户反馈的组件,方便大家直接集成使用源码下载地址: https://gith ...
MongoDB常用操作--集合1
1.创建集合有两种方式,显示创建和隐式创建显示创建可以使用命令 db.createCollection("集合名称") 隐式创建可以使用命令 db.集合名称.insert({}) ...
萌新笔记——linux下查看内存的使用情况
windows上有各种软件可以进行"一键加速"之类的操作,释放掉一些内存(虽然我暂时不知道是怎么办到的,有待后续学习).而任务管理器也可以很方便地查看各进程使用的内存情况,如下图: ...
XSS 前端防火墙 —— 无懈可击的钩子
昨天尝试了一系列的可疑模块拦截试验,尽管最终的方案还存在着一些兼容性问题,但大体思路已经明确了: 静态模块:使用 MutationObserver 扫描. 动态模块:通过 API 钩子来拦截路径属性. ...
Redis数据结构详解之Set（三）
序言在Redis中,Set和list都是字符串序列,非常相似,不同之处在于Set是用哈希表来保持字符串的唯一性,没有先后顺序,不像list一样,可以在首尾增删数据.但是set也有自己的相应处理命令来 ...
【.net 深呼吸】EqualityComparer——自定义相等比较
自定义实现两个对象的相等比较,一种方案是重写Object类的Equals方法,很easy,如果相等返回true,不相等就返回false.不过,如果把自定义相等的比较用于泛型集,比如Dictionary ...

html5+jqueryMobile编写App推广注册页

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

随机推荐

热门专题