本人開發的開發者技術變現資源聚集地,大家支持下，下面是網址
https://www.baiydu.com
html5+jqueryMobile的組合可以直接開發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頁面直接打開就可以運行。
二、整頁代碼
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 6 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 7 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 8 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 9 10 <title>Insert title here</title> 11 <script type="text/javascript"> 12 $(document).on("pagecreate", function () { 13 var contentHeight = document.body.clientHeight; 14 var header = contentHeight * 0.1; 15 var content = contentHeight * 0.75; 16 var footer = contentHeight * 0.15; 17 $("#phoneRegister #heardId").css({ 'height': header + 'px', 'background': '#4dbb49', 'line-height': header + 'px' }); 18 $("#phoneRegister #contentId").css({ 'height': content + 'px' }); 19 $("#phoneRegister #footerId").css({ 'height': footer + 'px', ' font-size': '70px', 'line-height': footer + 'px' }); 20 21 var flag = false; 22 setInterval(function () { 23 if (flag == false) { 24 $("#presentGiftTitle").css({ 'color': 'rgb(255, 0, 0)' }); 25 flag = true; 26 return; 27 } 28 if (flag == true) { 29 $("#presentGiftTitle").css({ 'color': 'rgb(255, 102, 0)' }); 30 flag = false; 31 return; 32 } 33 }, 100); 34 35 }); 36 //當頁面初始化完畢后 37 38 $(document).on("pageshow", "#commonRegister", function () { // 當進入頁面二時 39 40 var contentHeight = document.body.clientHeight; 41 var header = contentHeight * 0.1; 42 var content = contentHeight * 0.75; 43 var footer = contentHeight * 0.15; 44 45 $("#commonRegister #heardId").css({ 'height': header + 'px', 'background': '#4dbb49', 'line-height': header + 'px' }); 46 $("#commonRegister #contentId").css({ 'height': content + 'px' }); 47 $("#commonRegister #footerId").css({ 'height': footer + 'px', 'font-size': '70px', 'line-height': footer + 'px' }); 48 49 50 }); 51 52 53 54 55 $(document).on("pageinit", "#phoneRegister", function () { 56 $("#phoneRegisterClick").on("tap", function () { 57 58 var name = $("#phoneRegister #name").val(); 59 var password = $("#phoneRegister #password").val(); 60 61 var re = /^(13[0-9]{9})|(15[89][0-9]{8})$/; 62 if (!re.test(name)) { 63 alert("請輸入正確的手機號!") 64 return; 65 } 66 if (password.length < 6) { 67 alert("密碼不能小於6位數") 68 return; 69 } 70 var checkBox = $("#phoneRegister #Checkbox1"); 71 if (!checkBox.is(":checked")) { 72 alert("請閱讀條例!") 73 return; 74 } 75 76 77 //開始發送手機驗證 78 79 alertVerifyCodeMethod(); 80 81 82 83 }); 84 }); 85 86 87 88 89 $(document).on("pageinit", "#commonRegister", function () { 90 $("#commonRegisterClick").on("tap", function () { 91 92 var name = $("#commonRegister #name").val(); 93 var password = $("#commonRegister #password").val(); 94 var phonenumber = $("#commonRegister #phoneNumber").val(); 95 var safemail = $("#commonRegister #safeMail").val(); 96 97 var re = /^(13[0-9]{9})|(15[89][0-9]{8})$/; 98 var mre = /\w@\w*\.\w/; 99 if (name.length < 6) { 100 alert("注冊用戶名不能小於6位數!") 101 return; 102 } 103 if (password.length < 10) { 104 105 alert("密碼不能小於10位數") 106 return; 107 } 108 if (!re.test(phonenumber)) { 109 110 alert("請輸入正確的手機號!") 111 return; 112 } 113 114 if (!mre.test(safemail)) { 115 alert("請輸入正確的郵箱!") 116 return; 117 } 118 119 var checkBox = $("#commonRegister #Checkbox1"); 120 if (!checkBox.is(":checked")) { 121 alert("請閱讀條例!") 122 return; 123 } 124 125 126 shareAjaxMethord(0, name, password, phonenumber, safemail); 127 128 129 130 131 132 }); 133 }); 134 135 136 137 function alertVerifyCodeMethod() { 138 139 if (document.all) { 140 document.getElementById("alertVerifyCodeBox").click(); 141 } 142 else { 143 var e = document.createEvent("MouseEvents"); 144 e.initEvent("click", true, true); 145 document.getElementById("alertVerifyCodeBox").dispatchEvent(e); 146 } 147 } 148 149 150 151 function shareAjaxMethord(index, name, password, phone, email) { 152 153 154 $.ajax({ 155 type: "POST", 156 async: false, 157 dataType: "text", 158 data: "&sgin=" + index + "&name=" + name + "&password=" + password + "&phone=" + phone + "&email=" + email, 159 url: "ajaxMediumPage.ashx", 160 success: function (returnDate) { 161 162 if (index == 0) { 163 if(returnDate=="1") 164 { 165 alert("注冊成功!"); 166 167 } 168 else 169 { 170 alert("注冊失敗!"); 171 } 172 } 173 else if (inedx == 1) { 174 175 } 176 else { 177 178 } 179 180 } 181 }); 182 } 183 184 185 </script> 186 </head> 187 <body> 188 189 <!-- 這個div data-role="page"表明它是一個頁面 --> 190 <div data-role="page" id="phoneRegister"> 191 <div data-role="header" id="heardId"> 192 193 <div style="margin-left:20px; font-size:17px; font-weight:bold"><a href="#pagetwo" style="color:white; text-decoration:none;">首頁>手機在線注冊</a></div> 194 195 </div> 196 197 <div data-role="content" id="contentId"> 198 199 200 <section id="posts"> 201 202 <article class="post"> 203 204 <header> 205 <h4 id="presentGiftTitle">使用手機后注冊后立刻贈送100樂幣!</h4> 206 </header> 207 <aside> 208 手機號: 209 <input id="name" type="text" placeholder="請輸入注冊帳號!" /> 210 </aside> 211 <aside> 212 密 碼: 213 <input id="password" type="password" placeholder="請輸入注冊密碼!" /> 214 215 </aside> 216 217 <aside> 218 <div style="margin-left:-15px;"> 219 <div style="width: 20px; height: 20px; float:left; margin-top:5px;"> <input id="Checkbox1" style="width: 18px; height: 18px;" type="checkbox" /></div> 220 <div style="margin-left:40px;"><h5>打勾注冊表示你同意本公司的服務條例!</h5></div> 221 </div> 222 223 </aside> 224 225 226 <aside style="margin-top:20px;"> 227 228 <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> 229 </aside> 230 231 232 <aside style="margin-top:20px;"> 233 <div style="float:right"><a href="#commonRegister" data-transition="flip">普通注冊(非手機)</a></div> 234 235 </aside> 236 237 <footer></footer> 238 239 </article> 240 241 </section> 242 243 244 245 246 247 </div> 248 249 <div data-role="footer" id="footerId" style="background:#666666;"> 250 251 <div style="width:100%;height:90%;text-align:center;"> 252 253 <div style="font-size:13px; height:25%;text-decoration:none;margin-top:0px;padding-top:0px; line-height:16px;">電話:400-900-8000</div> 254 <div style="font-size: 13px; height: 25%; text-decoration:none;margin-top: 0px; padding-top: 0px; line-height:16px;">渝ICP備000000-c號</div> 255 <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height: 16px;">版權所有</div> 256 257 </div> 258 259 </div> 260 261 262 </div> 263 264 265 266 267 268 269 <!-- 這個div data-role="page"表明它是一個頁面 --> 270 <div data-role="page" id="commonRegister"> 271 <div data-role="header" id="heardId"> 272 273 <div style="margin-left:20px; font-size:17px; font-weight:bold"><a href="#pagetwo" style="color:white; text-decoration:none;">首頁>普通用戶在線注冊</a></div> 274 275 </div> 276 277 <div data-role="content" id="contentId"> 278 279 280 281 282 283 <section id="posts"> 284 285 <article class="post"> 286 287 288 <aside> 289 帳 號: 290 <input id="name" type="text" placeholder="請輸入注冊帳號!" /> 291 </aside> 292 <aside> 293 密 碼: 294 <input id="password" type="password" placeholder="請輸入注冊密碼!" /> 295 296 </aside> 297 <aside> 298 手機號: 299 <input id="phoneNumber" type="text" placeholder="請輸入手機號!" /> 300 301 </aside> 302 303 <aside> 304 安全郵箱: 305 <input id="safeMail" type="text" placeholder="請輸入安全郵箱!" /> 306 307 </aside> 308 <aside> 309 <div style="margin-left:-15px;"> 310 <div style="width: 20px; height: 20px; float:left; margin-top:5px;"> <input id="Checkbox1" style="width: 18px; height: 18px;" type="checkbox" /></div> 311 <div style="margin-left:40px;"><h5>打勾注冊表示你同意本公司的服務條例!</h5></div> 312 </div> 313 314 </aside> 315 316 317 <aside style="margin-top:20px;"> 318 319 <div id="commonRegisterClick" style="text-align:center;border:1px solid #666666; background:#4dbb49;color:white;height:30px;width:100px; line-height:30px;">立即注冊 </div> 320 </aside> 321 322 323 <aside style="margin-top:20px;"> 324 <div style="float:right"><a href="#phoneRegister" data-transition="flip">手機注冊(手機號)</a></div> 325 326 </aside> 327 328 <footer></footer> 329 330 </article> 331 </section> 332 333 334 335 </div> 336 337 <div data-role="footer" id="footerId" style="background:#666666;"> 338 339 <div style="width:100%;height:90%;text-align:center;"> 340 341 <div style="font-size:13px; height:25%;text-decoration:none;margin-top:0px;padding-top:0px; line-height:16px;">電話:400-900-8000</div> 342 <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height:16px;">渝ICP備000000-c號</div> 343 <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height: 16px;">版權所有</div> 344 345 </div> 346 347 </div> 348 349 350 </div> 351 352 353 354 355 356 357 358 359 360 <div data-role="page" id="dialog" style="padding-top:auto"> 361 <div data-role="header" id="heardId" style="background:#4dbb49"> 362 <h1>輸入驗證碼</h1> 363 </div> 364 365 <div data-role="content" id="contentId"> 366 367 <aside> 368 驗證碼: 369 <input id="verifyCode" type="text" placeholder="請輸入驗證碼!" /> 370 371 </aside> 372 <aside> 373 374 <div id="inputVerifyCodeDiv" style="width: 100px; height: 30px; background: #4dbb49; color:white; line-height:30px; float:right; text-align:center">確 定</div> 375 376 </aside> 377 </div> 378 379 <div data-role="footer" id="footerId" style="background:#4dbb49"> 380 <h1></h1> 381 </div> 382 </div> 383 384 385 386 </body> 387 </html>
上面的代碼直接copy到一個html頁面可以運行。
本人創業做的一款androidApp, 下載量已經有2000多萬,各種當前熱門的網絡手機獎勵紅包全部集成，另外還有熱門電影和淘寶高額優惠券！很適合各類型的用戶。
