html5+jqueryMobile编写App推广注册页

本人开发的开发者技术变现资源聚集地,大家支持下，下面是网址

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标签组合成的一个整体页面，当然它们都各自加了上面的特性。

<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>
212                             密&nbsp;&nbsp;码:
213                             <input id="password" type="password" placeholder="请输入注册密码!" />
214 
215                         </aside>
216 
217                         <aside>
218                             <div style="margin-left:-15px;">
219                                 <div style=" 20px;   height: 20px; float:left;  margin-top:5px;"> <input id="Checkbox1" style=" 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;  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="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                             密&nbsp;&nbsp;码:
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=" 20px;   height: 20px; float:left;  margin-top:5px;"> <input id="Checkbox1" style=" 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;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="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=" 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多万,各种当前热门的网络手机奖励红包全部集成，另外还有热门电影和淘宝高额优惠券！很适合各类型的用户。