首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery Mobile和HTML5开发App推广注册页

Posted in Javascript onNovember 07, 2016

jQuery Mobile和HTML5的组合可以直接开发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" id="phoneRegister">
<!--data-role="header"这个特性你想成APP的navigationbar -->
<div data-role="header" id="heardId"></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 name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

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

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

以上所述是小编给大家介绍的jQuery Mobile和HTML5开发App推广注册页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery Mobile和HTML5开发App推广注册页

- Author -

L-H

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
js日期联动示例
May 02 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
原生js编写2048小游戏
Mar 17 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
学习JavaScript图片预加载模块
Nov 07 #Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 #Javascript
jquery html5 视频播放控制代码
Nov 06 #Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 #Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 #Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 #Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 #Javascript
callback(1) RTX 3050 ti(1) webpack(1) swing(1) 字符画(1) cudnn(1) 热力图(1) cudn(1) Git(3) 脚本(1)
You might like
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP生成树的方法
2015/07/28 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
JavaScript 学习笔记（十五）
2010/01/28 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery Tags Input Plugin（添加/删除标签插件）详解
2016/06/20 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python多线程爬虫简单示例
2016/03/04 Python
numpy自动生成数组详解
2017/12/15 Python
Python制作词云的方法
2018/01/03 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
解析python 中/ 和 % 和 //（地板除）
2020/06/28 Python
python绘制雷达图实例讲解
2021/01/03 Python
python drf各类组件的用法和作用
2021/01/12 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商：LE CHÂTEAU
2017/10/06 全球购物
什么是Smarty变量操作符？如何使用Smarty变量操作符
2014/07/18 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
写演讲稿要注意的六件事
2014/01/14 职场文书
给老婆大人的检讨书
2014/02/24 职场文书