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标签组合成的一个整体页面，当然它们都各自加了上面的特性。
<> <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的支持库
<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" id="phoneRegister"> <div data-role="header" id="heardId"> <div><a href="#pagetwo">首页>手机在线注册</a></div> </div> <div data-role="content" id="contentId"> <section id="posts"> <article> <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> <div> <input id="Checkbox1" type="checkbox" /></div> <div><h5>打勾注册表示你同意本公司的服务条例!</h5></div> </div> </aside> <aside> <div id="phoneRegisterClick">立即注册<a href="#dialog" id="alertVerifyCodeBox" data-rel="dialog"></a> </div> </aside> <aside> <div><a href="#commonRegister" data-transition="flip">普通注册(非手机)</a></div> </aside> <footer></footer> </article> </section> </div> <div data-role="footer" id="footerId"> <div> <div>电话:400-900-8000</div> <div>渝ICP备000000-c号</div> <div>版权所有</div> </div> </div> </div> <> <div data-role="page" id="commonRegister"> <div data-role="header" id="heardId"> <div><a href="#pagetwo">首页>普通用户在线注册</a></div> </div> <div data-role="content" id="contentId"> <section id="posts"> <article> <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> <div> <input id="Checkbox1" type="checkbox" /></div> <div><h5>打勾注册表示你同意本公司的服务条例!</h5></div> </div> </aside> <aside> <div id="commonRegisterClick">立即注册 </div> </aside> <aside> <div><a href="#phoneRegister" data-transition="flip">手机注册(手机号)</a></div> </aside> <footer></footer> </article> </section> </div> <div data-role="footer" id="footerId"> <div> <div>电话:400-900-8000</div> <div>渝ICP备000000-c号</div> <div>版权所有</div> </div> </div> </div> <div data-role="page" id="dialog"> <div data-role="header" id="heardId"> <h1>输入验证码</h1> </div> <div data-role="content" id="contentId"> <aside> 验证码: <input id="verifyCode" type="text" placeholder="请输入验证码!" /> </aside> <aside> <div id="inputVerifyCodeDiv">确 定</div> </aside> </div> <div data-role="footer" id="footerId"> <h1></h1> </div> </div> </body> </html>
上面的代码直接copy到一个html页面可以运行。
以上所述是小编给大家介绍的jQuery Mobile和HTML5开发App推广注册页，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！
【jQuery Mobile和HTML5开发App推广注册页】相关文章：