html5+jqueryMobile編寫App推廣註冊頁

html5+jqueryMobile的組合可以直接開發web版的app，所以用到我當前app中的推廣註冊頁的編寫是很恰當的,其實只要你熟悉html4+jquery的組合開發，那麼html5+jqueryMobile你會立刻上手。html5比html4多了很多的標簽,特別是多媒體這塊有了很好的支持，但 ...

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標簽組合成的一個整體頁面，當然它們都各自加了上面的特性。

<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的支持庫

上面的庫都是直接通過鏈接地址引入的，等會我直接貼代碼，如果想看效果，可以直接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