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

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
jquery mobile开发app、jquerymobile开发工具、jquery mobile、jquery mobile 教程、jquery mobile demo，以便于您获取更多的相关知识。

时间： 2024-09-25 05:34:21

jQuery Mobile和HTML5开发App推广注册页_jquery的相关文章

转载：用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发

转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dreamweaver5.5+PhoneGap+Jquery Mobile搭建移动开发环境,轻轻松松开发你自己的应用.让你用普通的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台. 安装Dreamweaver5.5 这里要注意,Dreamweaver5.5的内部版本需要534

让jQuery Mobile不显示讨厌loading界面的方法_jquery

jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length<5)

[转载] jQuery Mobile 开发 Web App 系列文章目录

首先是jquery mobile api 的中文站点:http://www.jqmapi.com/  然后下面是网上找的一个很好的教程系列文章,转载如下 -------------------------------------------------------------------------------------------------------------------------------- "使用 jQuery Mobile 与 HTML5 开发 Web App"系列

jQuery Mobile开发HTML5移动应用

随着移动互联世界的到来,目前已发展到多种移动操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过手机的浏览器即可浏览.除此以外

html5+jquery mobile打包成apk后input type=“date”失效

问题描述 html5+jquery mobile打包成apk后input type="date"失效 html5+jquery mobile制作的手机app客户端用phonegap+eclipse打包成apk后input type="date"失效.用浏览器打开后正常,打包成apk安装到手机上,日期选择图标没有了,无法选择日期.部分代码如图:求大大解答!该怎么解决? 解决方案 问题已解决!!!!!!!!!!!! 解决方案二: http://stackoverflow

经典收藏 50个jQuery Mobile开发技巧集萃

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

jQuery mobile 移动web(6)_jquery

jquery mobile 针对移动端设备的事件类型.   1.touch 事件.   tap 快速触摸屏幕并且离开,类似一种完整的点击操作.   taphold 触摸屏幕并保持一段时间.   swipe 在1秒内水平移动30px屏幕像素上时触发.   swipeleft 向左侧滑动   swiperight 像右侧滑动.   2.方向改变事件   orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,   该参数

jQuery Mobile页面返回不需要重新get_jquery

jQuery Mobile 是用于创建移动 Web 应用的前端开发框架. jQuery Mobile 可以应用于智能手机与平板电脑. jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个问题,使我查了很多资料都没有找到很好的解决方案,最终只能逼着我读jQuery Mo

jQuery Mobile页面跳转切换的几种方式

jQuery Mobile在移动开发中越来越受到欢迎.而他的各个版本也在持续不断的更新中.同样的我也很喜欢它,它加快了我们开发HTML5的速度. 同时又具备jQuery一样的操作方法.学起来也是相当的容易.所以这一片文章就是介绍jQuery Mobile的页面跳转的. 少说废话,看源码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <