jQuery Mobile和HTML5開發(fā)App推廣注冊頁
jQuery Mobile和HTML5的組合可以直接開發(fā)web版的app，所以用到我當(dāng)前app中的推廣注冊頁的編寫是很恰當(dāng)?shù)?其實(shí)只要你熟悉html4+jquery的組合開發(fā)，那么html5+jqueryMobile你會(huì)立刻上手。
html5比html4多了很多的標(biāo)簽,特別是多媒體這塊有了很好的支持，但是如果只是做一般的web手機(jī)頁面，那么多數(shù)標(biāo)簽是用不上的，JqueryMobile與jquery的不同點(diǎn)就在一些事件名稱上，當(dāng)然這里封裝的也是html5的原生事件,還要說一個(gè)關(guān)于html5提倡的一個(gè)規(guī)則，這里jquerymobile是遵循了這個(gè)規(guī)則的, html5里面給標(biāo)簽增加幾個(gè)新的權(quán)限特征， data-role="page"、 data-role="header" 、data-role="content"、 data-role="footer", 為什么html5會(huì)增加這幾個(gè)特征，我覺得多是為支持web版手機(jī)app開發(fā)而出的，因?yàn)閔tml5提倡開發(fā)web版app只創(chuàng)建一個(gè)html頁，然后每個(gè)段落=一個(gè)新頁面，下面我貼一段幾個(gè)div標(biāo)簽組合成的一個(gè)整體頁面，當(dāng)然它們都各自加了上面的特性。
<!--data-role="page"表示這個(gè)是一個(gè)html5單獨(dú)頁面，可以從另外一個(gè)加了page特性的div打開它 --> <div data-role="page" id="phoneRegister"> <!--data-role="header"這個(gè)特性你想成APP的navigationbar --> <div data-role="header" id="heardId"></div> <!--data-role="content"內(nèi)容里面展示頁面內(nèi)容的，必入你放一張表在這個(gè)標(biāo)簽里面展示 --> <div data-role="content"> </div> <!--data-role="footer"這個(gè)特性你想成APP的tabbar --> <div data-role="footer"> </div> </div>
上面的div其實(shí)就組合成了一個(gè)html5頁面了。
一、頁面注意事項(xiàng)
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="> 上面的庫都是直接通過鏈接地址引入的，等會(huì)我直接貼代碼，如果想看效果，可以直接copy代碼到一個(gè)html頁面直接打開就可以運(yùn)行。 二、整頁代碼 上面的代碼直接copy到一個(gè)html頁面可以運(yùn)行。 以上所述是小編給大家介紹的jQuery Mobile和HTML5開發(fā)App推廣注冊頁，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(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)入頁面二時(shí)
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ī)驗(yàn)證
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>
<!-- 這個(gè)div data-role="page"表明它是一個(gè)頁面 -->
<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ī)后注冊后立刻贈(zèng)送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>
<!-- 這個(gè)div data-role="page"表明它是一個(gè)頁面 -->
<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>輸入驗(yàn)證碼</h1>
</div>
<div data-role="content" id="contentId">
<aside>
驗(yàn)證碼:
<input id="verifyCode" type="text" placeholder="請輸入驗(yàn)證碼!" />
</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>
相關(guān)文章
這篇文章主要介紹了JQuery右鍵菜單插件ContextMenu使用指南,需要的朋友可以參考下2014-12-12
JQuery中attr方法和removeAttr方法用法實(shí)例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實(shí)例分析了jQuery中attr方法設(shè)置屬性與removeAttr方法移除屬性的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery選擇器之子元素過濾選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程,文中的示例主要針對其播放音頻文件的用法,需要的朋友可以參考下2016-03-03
jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對象
本節(jié)主要介紹了使用jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對象,需要的朋友可以參考下2014-07-07
放棄用你的InnerHTML來輸出HTML吧 jQuery Tmpl不詳細(xì)講解
在Ajax橫道的今天，我們在頁面交互上有了更高的要求，動(dòng)態(tài)生成HTML毫無疑問是其中的一種。動(dòng)態(tài)生成HTML的方式多種多樣，最終通過一定的方法輸出給用戶innerHTML、documentWrite等方式2013-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)呼吸輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
有時(shí)候我們需要在jquery中要顯示與隱藏層，很簡單的方法就是直接使用hide與show方法就可以了，但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來實(shí)現(xiàn)2013-08-08
jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時(shí)無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢,接下來詳細(xì)介紹使用方法，感興趣的朋友可以了解下2013-01-01
jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
實(shí)現(xiàn)彈出遮罩層的方法有很多種，接下來本文給大家介紹通過jquery操作dom實(shí)現(xiàn)彈出頁面遮罩層以及web端和移動(dòng)阻止遮罩層的滑動(dòng)，對頁面彈出遮罩層的相關(guān)知識感興趣的朋友一起看看吧2016-08-08