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

随机推荐

「译」JUnit 5 系列：条件测试
原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...
微信开发：WeixinPayInfoCollection尚未注册Mch 问题解决
在使用开源项目 SENPARC.WEIXIN SDK 调用微信支付接口的时候出现了WeixinPayInfoCollection尚未注册Mch,这个问题. 最后地解决方案是: 我这个傻逼忘了在全局Gl ...
如何理解DT将是未来IT的转型之路？
如今的IT面临着内忧外患的挑战. 一方面,企业多多少少都建立了信息化,有些企业或集团甚至会有数几十个分公司,包含直销.代理.零售以及第三方物流等多种业态.越是复杂的业务,信息化建设越困难,比如运用大量 ...
iOS从零开始学习直播之3.美颜
任何一款直播软件都必须进行美颜,不然哪来的那么多美女,所以技术改变世界,不只是说说而已.美颜在采集的时候就得就行,让主播实时看到直播的效果. 1.美颜原理其实美颜的本质就是美白和磨皮,分别通 ...
关于领域驱动设计（DDD）中聚合设计的一些思考
关于DDD的理论知识总结,可参考这篇文章. DDD社区官网上一篇关于聚合设计的几个原则的简单讨论: 文章地址:http://dddcommunity.org/library/vernon_2011/, ...
iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总
--系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...
分布式理论之一：Paxos算法的通俗理解
维基的简介:Paxos算法是莱斯利·兰伯特(Leslie Lamport,就是 LaTeX 中的"La",此人现在在微软研究院)于1990年提出的一种基于消息传递且具有高度容错特性 ...
dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
ABP框架 - 集成OWIN
文档目录如果你在应用中同时使用Asp.net Mvc和Asp.net Web API,你需要在你的项目里添加Abp.Owin的nuget包(通常是Web项目)然后在你的OWIN的Startup文件里 ...
Entity Framework 6 Recipes 2nd Edition（12-8）译 -> 重新获取一个属性的原始值
12-8. 重新获取一个属性的原始值问题在实体保存到数据库之前,你想重新获取属性的原始值解决方案假设你有一个模型 (见 Figure 12-11) 表示一个员工( Employee),包含工资 ...

html5+jqueryMobile编写App推广注册页

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

随机推荐

热门专题