jQuery Mobile和HTML5开发App推广注册页
jQueryMobile和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打开它--> <divdata-role="page"id="phoneRegister"> <!--data-role="header"这个特性你想成APP的navigationbar--> <divdata-role="header"id="heardId"></div> <!--data-role="content"内容里面展示页面内容的,必入你放一张表在这个标签里面展示--> <divdata-role="content"></div> <!--data-role="footer"这个特性你想成APP的tabbar--> <divdata-role="footer"></div> </div>
上面的div其实就组合成了一个html5页面了。
一、页面注意事项
1.首先html5标准页面申明,页面中的第一行代码与html4不一样,
html5:<!DOCTYPE>
html4:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
此标签的作用是告诉浏览器支持什么html规范。
2.引入jquery和jquerymobile的支持库
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
上面的库都是直接通过链接地址引入的,等会我直接贴代码,如果想看效果,可以直接copy代码到一个html页面直接打开就可以运行。
二、整页代码
<!DOCTYPE> <html> <head> <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/> <metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"> <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script> <scriptsrc="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <title>Inserttitlehere</title> <scripttype="text/javascript"> $(document).on("pagecreate",function(){ varcontentHeight=document.body.clientHeight; varheader=contentHeight*0.1; varcontent=contentHeight*0.75; varfooter=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'}); varflag=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(){//当进入页面二时 varcontentHeight=document.body.clientHeight; varheader=contentHeight*0.1; varcontent=contentHeight*0.75; varfooter=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(){ varname=$("#phoneRegister#name").val(); varpassword=$("#phoneRegister#password").val(); varre=/^(13[0-9]{9})|(15[89][0-9]{8})$/; if(!re.test(name)){ alert("请输入正确的手机号!") return; } if(password.length<6){ alert("密码不能小于6位数") return; } varcheckBox=$("#phoneRegister#Checkbox1"); if(!checkBox.is(":checked")){ alert("请阅读条例!") return; } //开始发送手机验证 alertVerifyCodeMethod(); }); }); $(document).on("pageinit","#commonRegister",function(){ $("#commonRegisterClick").on("tap",function(){ varname=$("#commonRegister#name").val(); varpassword=$("#commonRegister#password").val(); varphonenumber=$("#commonRegister#phoneNumber").val(); varsafemail=$("#commonRegister#safeMail").val(); varre=/^(13[0-9]{9})|(15[89][0-9]{8})$/; varmre=/\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; } varcheckBox=$("#commonRegister#Checkbox1"); if(!checkBox.is(":checked")){ alert("请阅读条例!") return; } shareAjaxMethord(0,name,password,phonenumber,safemail); }); }); functionalertVerifyCodeMethod(){ if(document.all){ document.getElementById("alertVerifyCodeBox").click(); } else{ vare=document.createEvent("MouseEvents"); e.initEvent("click",true,true); document.getElementById("alertVerifyCodeBox").dispatchEvent(e); } } functionshareAjaxMethord(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("注册失败!"); } } elseif(inedx==1){ } else{ } } }); } </script> </head> <body> <!--这个divdata-role="page"表明它是一个页面--> <divdata-role="page"id="phoneRegister"> <divdata-role="header"id="heardId"> <divstyle="margin-left:20px;font-size:17px;font-weight:bold"><ahref="#pagetwo"style="color:white;text-decoration:none;">首页>手机在线注册</a></div> </div> <divdata-role="content"id="contentId"> <sectionid="posts"> <articleclass="post"> <header> <h4id="presentGiftTitle">使用手机后注册后立刻赠送100乐币!</h4> </header> <aside> 手机号: <inputid="name"type="text"placeholder="请输入注册帐号!"/> </aside> <aside> 密 码: <inputid="password"type="password"placeholder="请输入注册密码!"/> </aside> <aside> <divstyle="margin-left:-15px;"> <divstyle="width:20px;height:20px;float:left;margin-top:5px;"><inputid="Checkbox1"style="width:18px;height:18px;"type="checkbox"/></div> <divstyle="margin-left:40px;"><h5>打勾注册表示你同意本公司的服务条例!</h5></div> </div> </aside> <asidestyle="margin-top:20px;"> <divid="phoneRegisterClick"style="text-align:center;border:1pxsolid#666666;background:#4dbb49;color:white;height:30px;width:100px;line-height:30px;">立即注册<ahref="#dialog"id="alertVerifyCodeBox"data-rel="dialog"style="display:none"></a></div> </aside> <asidestyle="margin-top:20px;"> <divstyle="float:right"><ahref="#commonRegister"data-transition="flip">普通注册(非手机)</a></div> </aside> <footer></footer> </article> </section> </div> <divdata-role="footer"id="footerId"style="background:#666666;"> <divstyle="width:100%;height:90%;text-align:center;"> <divstyle="font-size:13px;height:25%;text-decoration:none;margin-top:0px;padding-top:0px;line-height:16px;">电话:400-900-8000</div> <divstyle="font-size:13px;height:25%;text-decoration:none;margin-top:0px;padding-top:0px;line-height:16px;">渝ICP备000000-c号</div> <divstyle="font-size:13px;height:25%;text-decoration:none;margin-top:0px;padding-top:0px;line-height:16px;">版权所有</div> </div> </div> </div> <!--这个divdata-role="page"表明它是一个页面--> <divdata-role="page"id="commonRegister"> <divdata-role="header"id="heardId"> <divstyle="margin-left:20px;font-size:17px;font-weight:bold"><ahref="#pagetwo"style="color:white;text-decoration:none;">首页>普通用户在线注册</a></div> </div> <divdata-role="content"id="contentId"> <sectionid="posts"> <articleclass="post"> <aside> 帐号: <inputid="name"type="text"placeholder="请输入注册帐号!"/> </aside> <aside> 密 码: <inputid="password"type="password"placeholder="请输入注册密码!"/> </aside> <aside> 手机号: <inputid="phoneNumber"type="text"placeholder="请输入手机号!"/> </aside> <aside> 安全邮箱: <inputid="safeMail"type="text"placeholder="请输入安全邮箱!"/> </aside> <aside> <divstyle="margin-left:-15px;"> <divstyle="width:20px;height:20px;float:left;margin-top:5px;"><inputid="Checkbox1"style="width:18px;height:18px;"type="checkbox"/></div> <divstyle="margin-left:40px;"><h5>打勾注册表示你同意本公司的服务条例!</h5></div> </div> </aside> <asidestyle="margin-top:20px;"> <divid="commonRegisterClick"style="text-align:center;border:1pxsolid#666666;background:#4dbb49;color:white;height:30px;width:100px;line-height:30px;">立即注册</div> </aside> <asidestyle="margin-top:20px;"> <divstyle="float:right"><ahref="#phoneRegister"data-transition="flip">手机注册(手机号)</a></div> </aside> <footer></footer> </article> </section> </div> <divdata-role="footer"id="footerId"style="background:#666666;"> <divstyle="width:100%;height:90%;text-align:center;"> <divstyle="font-size:13px;height:25%;text-decoration:none;margin-top:0px;padding-top:0px;line-height:16px;">电话:400-900-8000</div> <divstyle="font-size:13px;height:25%;text-decoration:none;margin-top:0px;padding-top:0px;line-height:16px;">渝ICP备000000-c号</div> <divstyle="font-size:13px;height:25%;text-decoration:none;margin-top:0px;padding-top:0px;line-height:16px;">版权所有</div> </div> </div> </div> <divdata-role="page"id="dialog"style="padding-top:auto"> <divdata-role="header"id="heardId"style="background:#4dbb49"> <h1>输入验证码</h1> </div> <divdata-role="content"id="contentId"> <aside> 验证码: <inputid="verifyCode"type="text"placeholder="请输入验证码!"/> </aside> <aside> <divid="inputVerifyCodeDiv"style="width:100px;height:30px;background:#4dbb49;color:white;line-height:30px;float:right;text-align:center">确定</div> </aside> </div> <divdata-role="footer"id="footerId"style="background:#4dbb49"> <h1></h1> </div> </div> </body> </html>
上面的代码直接copy到一个html页面可以运行。
以上所述是小编给大家介绍的jQueryMobile和HTML5开发App推广注册页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!