## 注冊頁面二
注冊步驟一
注冊步驟二
代碼如下：
register_win.html
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>注冊</title>
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
.aui-bar {
/*background:#5b5a55;*/
background: #3bafda;
color: #ffffff
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
<a class="aui-pull-left" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-close"></span>
</a>
<div class="aui-title" id="title">注冊</div>
</header>
</body>
<script type="text/javascript" src="../../../script/api.js" ></script>
<script type="text/javascript">
function closeWin(){
api.closeWin({});
}
apiready = function () {
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrameGroup ({
name: 'register_frm',
scrollEnabled:false,
rect:{x:0, y:headerPos.h, w:'auto', h:body_h - headerPos.h},
index:0,
frames:
[{
name: 'register_one_frm',
url: 'register_one_frm.html',
bounces:false,
vScrollBarEnabled: false,
hScrollBarEnabled: false
},{
name: 'register_two_frm',
url: 'register_two_frm.html',
bounces:false,
vScrollBarEnabled: false,
hScrollBarEnabled: false
}]
}, function(ret, err){
var name = ret.name;
var index = ret.index;
});
}
</script>
</html>
```
register_one_frm.html
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>注冊</title>
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
body {
height: auto;
}
.aui-card {
margin-top: 15px;
}
.aui-input-addon.aui-iconfont {
font-size: 20px;
}
</style>
</head>
<body>
<div class="aui-content aui-card aui-noborder">
<div class="aui-form">
<div class="aui-input-row">
<i class="aui-input-addon aui-iconfont aui-icon-mobilefill aui-text-warning"></i>
<input type="text" id="mobile" class="aui-input" placeholder="手機號"/>
</div>
<div class="aui-input-row">
<input type="number" class="aui-input" id="code" placeholder="請輸入收到的驗證碼"/>
<span class="aui-input-addon">
<div class="aui-btn" id="sendVerify" status="1" tapmode>獲取驗證碼</div>
</span>
</div>
<div class="aui-input-row">
<i class="aui-input-addon aui-iconfont aui-icon-lock aui-text-warning"></i>
<input type="password" id="password" class="aui-input" placeholder="密碼"/>
<i class="aui-input-addon aui-iconfont aui-icon-attention aui-text-default" tapmode onclick="showPassword();" id="showpass-btn"></i>
</div>
<div class="aui-input-row">
<i class="aui-input-addon aui-iconfont aui-icon-lock aui-text-warning"></i>
<input type="password" id="password2" class="aui-input" placeholder="確認密碼"/>
</div>
<div class="aui-btn-row">
<div class="aui-btn aui-btn-warning" tapmode onclick="setGroupIndex()">下一步</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../../script/api.js" ></script>
<script type="text/javascript">
function setGroupIndex(){
api.setFrameGroupIndex({
name: 'register_frm',
index:1,
scroll:true
});
}
var isinerval,times;
apiready = function () {
api.parseTapmode();
}
function showPassword(){
$api.attr($api.byId('password'),'type','text');
$api.removeCls($api.byId('showpass-btn'),'aui-icon-attention');
$api.addCls($api.byId('showpass-btn'),'aui-icon-attentionfill');
$api.attr($api.byId('showpass-btn'),'onclick','hidePassword();');
api.parseTapmode();
}
function hidePassword(){
$api.attr($api.byId('password'),'type','password');
$api.removeCls($api.byId('showpass-btn'),'aui-icon-attentionfill');
$api.addCls($api.byId('showpass-btn'),'aui-icon-attention');
$api.attr($api.byId('showpass-btn'),'onclick','showPassword();');
api.parseTapmode();
}
</script>
</html>
```
register_two_frm.html
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>注冊</title>
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
body {
height: auto;
}
.aui-card {
margin-top: 15px;
}
.avatar-box {
width: 100%;
padding: 15px 0;
text-align: center;
font-size: 12px;
}
.avatar-box p {
margin-bottom: 0;
font-size: 12px;
}
.avatar-box img {
width: 80px;
height: 80px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="aui-content aui-card aui-noborder">
<div class="avatar-box">
<img src="image/noavatar.gif" id="avatarImg" tapmode onclick="getPicture()" />
<p>選擇頭像</p>
</div>
<input type="hidden" id="avatar" />
<div class="aui-form">
<div class="aui-input-row">
<label class="aui-input-addon">昵稱</label>
<input type="text" class="aui-input" id="nickname" placeholder="昵稱"/>
</div>
<div class="aui-input-row">
<label class="aui-input-addon">性別</label>
<div class="aui-pull-right">
<input class="aui-radio aui-radio-info" type="radio" name="sex" value="man" checked><div class="aui-radio-name">男</div>
<input class="aui-radio aui-radio-warning" type="radio" name="sex" value="woman"><div class="aui-radio-name">女</div>
</div>
</div>
<div class="aui-input-row">
<label class="aui-input-addon">生日</label>
<input type="text" class="aui-input" id="birthday" placeholder="年／月／日" readonly tapmode onclick="openPicker()" />
</div>
<div class="aui-input-row">
<label class="aui-input-addon">地址</label>
<input type="text" class="aui-input" id="address" placeholder="所在地區"/>
</div>
<div class="aui-btn-row">
<div class="aui-btn aui-btn-default" tapmode onclick="setGroupIndex()">上一步</div>
<div class="aui-btn aui-btn-warning" tapmode onclick="confirm()">提交</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../../script/api.js" ></script>
<script type="text/javascript">
function confirm(){
api.closeWin({});
}
function getPicture(){
api.getPicture({
sourceType: 'library',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: true,
quality: 80,
targetWidth:200,
targetHeight:200,
saveToPhotoAlbum: false
}, function(ret, err){
if (ret.data) {
$api.attr($api.byId("avatarImg"),'src',ret.data);
}
})
}
function openPicker(){
api.openPicker({
type: 'date',
date: '1990-01-01',
title:'選擇日期'
},function(ret,err){
var year = ret.year;
var month = ret.month;
var day = ret.day;
$api.val($api.byId("birthday"),''+year+'/'+month+'/'+day+'');
});
}
function setGroupIndex(){
api.setFrameGroupIndex({
name: 'register_frm',
index:0,
scroll:true
});
}
apiready = function () {
api.parseTapmode();
}
</script>
</html>
```
- APP模塊
- 歡迎頁
- 頭部模塊
- 底部模塊
- 圖文列表
- 商品展示
- 文字列表
- 內容頁一
- 評論頁
- N宮格
- 獲得上一級的欄目名稱
- 搜索模塊
- 圖標
- 幻燈模塊
- 消息頁
- 個人中心
- 個人中心—我的收藏
- 個人中心—資料修改
- 個人中心—我的錢包（賬戶）
- 咨詢頁面
- APP模板
- 注冊 頁面一
- 注冊 頁面二
- 登錄 頁面一
- 登錄 頁面二
- 忘記密碼 頁面一
- 會員中心 首頁一
- 會員中心 首頁二
- 會員中心 首頁三
- 會員中心 資料修改
- 申請審核步驟
- 商品訂單一
- 游戲頁面
- 新聞列表頁
- 圖文列表頁
- 商品列表頁
- 商品詳情頁
- 聊天
- 消息列表
- 聊天界面
- 發布需求
- 前端框架
- CSS Framework
- trim 字符處理
- dom 選擇器
- 樣式
- evt 事件
- 選擇元素
- 屬性
- 文本
- 位置
- json
- 設置
- 提示
- AJAX
- storage 本地存儲
- API對象
- 常用函數
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用圖片
- asd