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

随机推荐

[数据结构]——链表(list)、队列(queue)和栈(stack)
在前面几篇博文中曾经提到链表(list).队列(queue)和(stack),为了更加系统化,这里统一介绍着三种数据结构及相应实现. 1)链表首先回想一下基本的数据类型,当需要存储多个相同类型的数据 ...
JAVA FreeMarker工具类
FreeMarkerUtil.java package pers.kangxu.datautils.utils; import java.io.File; import java.io.StringW ...
FreeMarker:怎么使用
第一个FreeMarker程序 1. 建立一个普通的java项目:testFreeMarker 2. 引入freemarker.jar包 3. 在项目目录下建立模板目录:templates 4. 在t ...
OpenSUSE下编译安装OpenFoam
在不是Ubuntu系统下安装OpenFoam,需要采用编译安装的方式.以下以OpenSuSE为例进行编译安装. 1 软件包准备需要下载两个程序包: OpenFOAM-4.x-version-4.1. ...
Mono 3.2.7发布，JIT和GC进一步改进
Mono 3.2.7已经发布,带来了很多新特性,如改进的JIT.新的面向LINQ的解释器以及使用了64位原生指令等等. 这是一次主要特性发布,累积了大约5个月的开发工作.看上去大部分改进都是底层的性能 ...
一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）
为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...
webpack搭建前端一条龙服务
作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...
小谈Scrum敏捷开发流程
一晃眼,有两年没有写博客了,回顾前两年,各种奔波,各种忙碌,也有不少的收获.从今天开始,我要把这些收获都分享在这里. 其实这两年,对我影响最大的是开发流程.总所周知,一个好的开发流程,对于项目的进行, ...
ABP源码分析十九：Auditing
审计跟踪(也叫审计日志)是与安全相关的按照时间顺序的记录,它们提供了活动序列的文档证据,这些活动序列可以在任何时间影响一个特定的操作. AuditInfo:定义如下图中需要被Audit的信息. Aud ...
错误: 从内部类中访问本地变量vvv; 需要被声明为最终类型
从github 下载了源码, 进行编译, 出现了下面的错误 E:\downloads\ff\elasticsearch-master\elasticsearch-master>GRADLE :b ...

html5+jqueryMobile编写App推广注册页

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

随机推荐

热门专题