jQuery Mobile和HTML5的組合可以直接開發(fā)web版的app，所以用到我當(dāng)前app中的推廣注冊頁的編寫是很恰當(dāng)?shù)?其實只要你熟悉html4+jquery的組合開發(fā)，那么html5+jqueryMobile你會立刻上手。
html5比html4多了很多的標(biāo)簽,特別是多媒體這塊有了很好的支持，但是如果只是做一般的web手機(jī)頁面，那么多數(shù)標(biāo)簽是用不上的，JqueryMobile與jquery的不同點就在一些事件名稱上，當(dāng)然這里封裝的也是html5的原生事件,還要說一個關(guān)于html5提倡的一個規(guī)則，這里jquerymobile是遵循了這個規(guī)則的, html5里面給標(biāo)簽增加幾個新的權(quán)限特征， data-role="page"、 data-role="header" 、data-role="content"、 data-role="footer", 為什么html5會增加這幾個特征，我覺得多是為支持web版手機(jī)app開發(fā)而出的，因為html5提倡開發(fā)web版app只創(chuàng)建一個html頁，然后每個段落=一個新頁面，下面我貼一段幾個div標(biāo)簽組合成的一個整體頁面，當(dāng)然它們都各自加了上面的特性。
<!--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"內(nèi)容里面展示頁面內(nèi)容的，必入你放一張表在這個標(biāo)簽里面展示 --><div data-role="content"> </div><!--data-role="footer"這個特性你想成APP的tabbar --><div data-role="footer"> </div></div>
上面的div其實就組合成了一個html5頁面了。
一、頁面注意事項
1. 首先html5標(biāo)準(zhǔn)頁面申明，頁面中的第一行代碼與html4不一樣,
html5:<!DOCTYPE>
html4:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 此標(biāo)簽的作用是告訴瀏覽器支持什么html規(guī)范。 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=" <script src="> <script src="> 上面的庫都是直接通過鏈接地址引入的，等會我直接貼代碼，如果想看效果，可以直接copy代碼到一個html頁面直接打開就可以運行。 二、整頁代碼 上面的代碼直接copy到一個html頁面可以運行。 以上所述是小編給大家介紹的jQuery Mobile和HTML5開發(fā)App推廣注冊頁，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！<!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" > <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);});//當(dāng)頁面初始化完畢后$(document).on("pageshow", "#commonRegister", function () { // 當(dāng)進(jìn)入頁面二時 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("請輸入正確的手機(jī)號!") return; } if (password.length < 6) { alert("密碼不能小于6位數(shù)") return; } var checkBox = $("#phoneRegister #Checkbox1"); if (!checkBox.is(":checked")) { alert("請閱讀條例!") return; } //開始發(fā)送手機(jī)驗證 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位數(shù)!") return; } if (password.length < 10) { alert("密碼不能小于10位數(shù)") return; } if (!re.test(phonenumber)) { alert("請輸入正確的手機(jī)號!") 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;">首頁>手機(jī)在線注冊</a></div> </div> <div data-role="content" id="contentId"> <section id="posts"> <article class="post"> <header> <h4 id="presentGiftTitle">使用手機(jī)后注冊后立刻贈送100樂幣!</h4> </header> <aside> 手機(jī)號: <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>打勾注冊表示你同意本公司的服務(wù)條例!</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">普通注冊(非手機(jī))</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;">版權(quán)所有</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> 手機(jī)號: <input id="phoneNumber" type="text" placeholder="請輸入手機(jī)號!" /> </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>打勾注冊表示你同意本公司的服務(wù)條例!</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">手機(jī)注冊(手機(jī)號)</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;">版權(quán)所有</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>
新聞熱點
疑難解答
