首页
所有分类
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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
探索node之事件循环的实现
Oct 30 Javascript
学习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
递归(1) tcp/ip(1) tokenizer(1) IP(1) 内置模块(1) 限速(1) Parser(1) 双人对弈(1) 后端(1) 限流(2)
You might like
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
Vue js 的生命周期（看了就懂）(推荐)
2019/03/29 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦：来吧展示实力强劲
2020/10/29 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python运算符重载用法实例
2015/05/28 Python
Python扩展内置类型详解
2018/03/26 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python with语句和过程抽取思想
2019/12/23 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python help函数实例用法
2020/12/06 Python
Cole Haan官方网站：美国时尚潮流品牌
2017/12/06 全球购物
英国领先的大码时装品牌之一：Elvi
2018/08/26 全球购物
英国钻石公司：British Diamond Company
2020/02/16 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
食品安全工作实施方案
2014/03/26 职场文书
建筑投标担保书
2014/05/20 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
党员公开承诺书2016
2016/03/24 职场文书
如何写一份具有法律效力的借款协议书？
2019/07/02 职场文书
创业计划书之水果店
2019/07/18 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
Python图像处理库PIL详细使用说明
2022/04/06 Python
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技