# 申請審核 例如幫主
說明：這個屬于申請步驟，例如申請成為“老師”，申請成為“醫生”，申請成為“幫主”，申請成為“司機”等等！
我們的例子是：申請成為幫主！如圖所示：
  
源代碼如下：
### my_to_helper_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-win.css"/>
<style>
.aui-bar {
background: #3bafda;
color: #ffffff
}
.aui-content {
background: #fff;
height: 50px;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ddd;
}
.line {
height: 2px;
width: 100%;
background: #eee;
position: absolute;
left: 0;
top:15px;
}
.dot {
position: absolute;
top: 3px;
color: #ddd;
text-align: center;
}
.dot p {
margin: 0 !important;
font-size: 12px;
color: #ccc;
}
.dot .aui-iconfont {
background: #fff;
}
.dot-0 {
left: 15%;
}
.dot-1 {
left: 50%;
margin-left: -26px;
}
.dot-2 {
right: 15%;
}
.dot.active, .dot.active p {
color: #ff9900;
}
</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-left"></span>我的
</a>
<div class="aui-title">成為幫主</div>
</header>
<section class="aui-content" id="tab">
<div class="line"></div>
<div class="dot dot-0 active" id="dot-0" tapmode>
<i class="aui-iconfont aui-icon-radiobox"></i>
<p>基本信息</p>
</div>
<div class="dot dot-1" id="dot-1" tapmode>
<i class="aui-iconfont aui-icon-radiobox"></i>
<p>個人介紹</p>
</div>
<div class="dot dot-2" id="dot-2" tapmode>
<i class="aui-iconfont aui-icon-radiobox"></i>
<p>等待審核</p>
</div>
</section>
</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 tab = $api.byId('tab');
var tabPos = $api.offset(tab);
var body_h = $api.offset($api.dom('body')).h;
api.openFrameGroup ({
name: 'my_to_helper_frm',
scrollEnabled:false,
rect:{x:0, y:headerPos.h+tabPos.h, w:'auto', h:body_h - headerPos.h - tabPos.h},
index:0,
frames:
[{
name: 'my_to_helper_one_frm',
url: 'my_to_helper_one_frm.html',
bounces:false,
vScrollBarEnabled: false,
hScrollBarEnabled: false
},{
name: 'my_to_helper_two_frm',
url: 'my_to_helper_two_frm.html',
bounces:false,
vScrollBarEnabled: false,
hScrollBarEnabled: false
},{
name: 'my_to_helper_three_frm',
url: 'my_to_helper_three_frm.html',
bounces:false,
vScrollBarEnabled: false,
hScrollBarEnabled: false
}]
}, function(ret, err){
var name = ret.name;
var index = ret.index;
});
};
function setGroupIndex(index){
$api.removeCls($api.dom(".dot.active"),'active');
$api.addCls($api.byId('dot-'+index+''),'active');
api.setFrameGroupIndex({
name: 'my_to_helper_frm',
index:index,
scroll:true
});
var beforeIndex = index-1;
$api.attr($api.byId('dot-'+index+''),'onclick',"setGroupIndex("+index+")");
$api.attr($api.byId('dot-'+beforeIndex+''),'onclick',"setGroupIndex("+beforeIndex+")");
api.parseTapmode();
}
</script>
</html>
```
### my_to_helper_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>
body{
height: auto;
}
.aui-card {
margin-top: 15px;
}
.aui-content {
margin-bottom: 0;
}
p {
padding: 0 10px;
}
p.padded {
padding: 10px;
}
.year-list {
background: none;
text-align: center;
overflow: hidden;
padding:10px 5px;
}
.year {
text-align: center;
font-size: 12px;
margin: 0 5px;
background: #fff;
height: 32px;
line-height: 32px;
border: 1px solid #ddd;
border-radius: 4px;
color: #333;
overflow: hidden;
}
.year.active {
background: #ff9900;
border: 1px solid #ff9900;
color: #ffffff;
-webkit-animation: fadeIn .5s ease both;
animation: fadeIn .5s ease both;
}
.year.disabled{
background: #eeeeee;
border-color: #eeeeee;
color: #666;
}
.price-list .amount strong {
font-size: 18px;
font-weight: 400;
}
.basic-info {
margin-bottom: 15px;
}
@-webkit-keyframes fadeIn {
from { background: #ffffff;border: 1px solid #ddd;}
to { background: #ff9900; border: 1px solid #ff9900;}
}
.aui-content-padded {
margin-top: 15px;
}
.full {
width: 100%;
}
</style>
</head>
<body>
<p class="padded">基本信息</p>
<div class="aui-content basic-info">
<div class="aui-form">
<div class="aui-input-row">
<span class="aui-input-addon">真實姓名</span>
<input type="text" class="aui-input" placeholder="姓名" id="name"/>
</div>
<div class="aui-input-row">
<span class="aui-input-addon">常用手機</span>
<input type="number" class="aui-input" placeholder="請填寫常用手機號碼" id="mobile"/>
</div>
<div class="aui-input-row">
<span class="aui-input-addon">任職機構</span>
<input type="text" class="aui-input" placeholder="請填寫當前任職機構" id="post_office"/>
</div>
<div class="aui-input-row">
<span class="aui-input-addon">頭銜職位</span>
<input type="text" class="aui-input" placeholder="請填寫您的頭銜職位" id="job_position"/>
</div>
<div class="aui-input-row">
<span class="aui-input-addon">常用郵箱</span>
<input type="email" class="aui-input" placeholder="請填寫您的常用郵箱" id="email"/>
</div>
</div>
</div>
<p>工作年限</p>
<div class="aui-content year-list">
<div class="">
<div class="aui-col-xs-3">
<div class="year active" year-data="0-3" data-status="1" tapmode>3年以下</div>
</div>
<div class="aui-col-xs-3">
<div class="year" year-data="3-5" data-status="1" tapmode>3-5年</div>
</div>
<div class="aui-col-xs-3">
<div class="year" year-data="5-10" data-status="1" tapmode>5-10年</div>
</div>
<div class="aui-col-xs-3">
<div class="year" year-data="10+" data-status="1" tapmode>10年以上</div>
</div>
</div>
</div>
<p class="padded">常駐城市</p>
<div class="aui-content">
<div class="aui-form">
<div class="aui-input-row full">
<input type="text" class="aui-input" placeholder="如：北京、上海" id="city" />
</div>
</div>
</div>
<p class="padded">所在常駐城市經常活動的區域</p>
<div class="aui-content">
<div class="aui-form">
<div class="aui-input-row full">
<input type="text" class="aui-input" placeholder="如：中關村、國貿" id="activity_area" />
</div>
</div>
</div>
<div class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="next()" status="0" id="nextBtn">下一步</div>
</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
function next(){
api.execScript({
name:'my_to_helper_win',
script:'setGroupIndex(1)'
})
}
apiready = function(){
api.parseTapmode();
var userid = $api.getStorage('userid');
var encrypt = $api.getStorage('encrypt');
var yearList = $api.domAll(".year");
for(var i in yearList){
$api.addEvt(yearList[i], 'click', function(){
$api.removeCls($api.dom(".year.active"),'active');
$api.addCls(this,'active');
});
}
}
</script>
</html>
```
### my_to_helper_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{
background: #f4f4f4;
width: 100%;
height: 100%;
}
p.title {
margin: 10px 0 5px 0;
}
p.title-sl {
font-size: 12px;
margin-bottom: 10px;
}
textarea.content{
width: 100%;
border: none;
height: 180px;
font-size: 14px;
margin-bottom: 0;
}
.image {
width: 100%;
}
.image img {
width: 100%;
display: table;
}
</style>
</head>
<body>
<section class="aui-content">
<p class="aui-text-center title">形象照片</p>
<p class="aui-text-center title-sl">請上傳一張橫幅</p>
<div class="aui-line-x"></div>
<div class="image">
<img src="image/noxingxiang.png" id="avatarImg" tapmode onclick="getPicture()" />
</div>
<div class="aui-line-x"></div>
<p class="aui-text-center title">個人介紹</p>
<div class="aui-form">
<textarea placeholder="盡可能詳細的介紹一下自己" class="content" id="introduce"></textarea>
</div>
</section>
<section class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="next()" id="nextBtn" status="1">提交審核</div>
</section>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
function next(){
api.execScript({
name:'my_to_helper_win',
script:'setGroupIndex(2)'
})
}
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);
}
})
}
apiready = function(){
api.parseTapmode();
}
</script>
</html>
```
### my_to_helper_three_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{
background: #f4f4f4;
width: 100%;
height: 100%;
}
p.title {
margin: 10px 0;
}
.aui-content {
text-align: center;
padding: 50px 15px;
}
.aui-iconfont {
font-size: 2.8em;
color: #ff9900;
font-weight: 700;
background: #ffffff;
padding: 10px;
border-radius: 50%;
}
h2 {
color: #ff9900;
margin: 15px 0;
}
.small {
font-size: 12px;
}
</style>
</head>
<body>
<section class="aui-content">
<i class="aui-iconfont aui-icon-check"></i>
<h2>提交成功</h2>
<p>我們會在最快的時間完成審核</p>
<p class="small">審核通過后您可以在我的中心發布話題；話題不僅能為您提高一定的知名度，同時還能帶來一筆額外的收入</p>
</section>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
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