## 圖文列表頁
說明：導師咨詢類APP。
源代碼如下：
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.css" />
<style>
.aui-bar {
background: #3bafda;
color: #ffffff
}
.aui-nav {
background-color: none;
}
.aui-nav .aui-bar-tab {
background-color: #fff;
border-top:1px solid #eee;
}
.aui-nav .aui-bar-tab .aui-iconfont{
font-size: 26px !important;
}
.aui-nav .aui-bar-tab .aui-iconfont, .aui-nav .aui-bar-tab p {
color: #a2a2a2;
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
<span class="aui-iconfont aui-icon-left aui-pull-left" tapmode onclick="closeWin()"></span>
<div class="aui-title" id="title">幫主</div>
<a class="aui-pull-right" tapmode onclick="askAdd()">
提問<span class="aui-iconfont aui-icon-right"></span>
</a>
</header>
<footer class="aui-nav" id="aui-footer">
<ul class="aui-bar-tab">
<li class="active-info" id="helper_list" tapmode onclick="randomSwitchBtn(0,'helper_list')">
<span class="aui-iconfont aui-icon-crownfill"></span>
<p>幫主</p>
</li>
<li id="ask_list" tapmode onclick="randomSwitchBtn(1,'ask_list')">
<span class="aui-iconfont aui-icon-commandfill"></span>
<p>問答</p>
</li>
<li id="my" tapmode onclick="randomSwitchBtn(2,'my')">
<span class="aui-iconfont aui-icon-peoplefill"></span>
<p>我的</p>
</li>
</ul>
</footer>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
function askAdd(){
api.openWin({
name:'ask_add_win',
url:'ask_add_win.html',
delay:300
})
}
function closeWin(){
api.closeWin({});
}
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
openGroup();
};
function openGroup(){
var header = $api.byId('aui-header');
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
var footer_h = $api.offset($api.byId('aui-footer')).h;
api.openFrameGroup({
name: 'indexGroup',
scrollEnabled: true,
rect:{x:0, y:headerPos.h, w:'auto', h:body_h - headerPos.h - footer_h},
index: 0,
frames: [{
name:'helper_list',
url:'helper_list.html',
vScrollBarEnabled:false,
hScrollBarEnabled:false,
bounces:false
},{
name:'ask_list',
url:'ask_list.html',
vScrollBarEnabled:false,
hScrollBarEnabled:false,
bounces:false
},{
name:'my',
url:'my.html',
vScrollBarEnabled:false,
hScrollBarEnabled:false,
bounces:false
}]
}, function (ret, err) {
$api.removeCls($api.dom('#aui-footer li.active-info'),'active-info');
$api.addCls($api.byId(''+ret.name+''),'active-info');
});
}
// 隨意切換按鈕
function randomSwitchBtn(index,name) {
$api.removeCls($api.dom('#aui-footer li.active-info'),'active-info');
$api.addCls($api.byId(''+name+''),'active-info');
api.setFrameGroupIndex({
name: 'indexGroup',
index: index
});
}
</script>
</html>
```
helper_list.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">
img.aui-img-object {
border-radius: 50%;
}
.laud {
font-size: 14px;
color: #999;
}
p {
margin: 5px 0 !important;
display: table;
}
.helper-tag {
color: #666666;
font-size: 12px;
}
</style>
</head>
<body>
<section class="aui-content">
<ul class="aui-list-view">
<li class="aui-list-view-cell aui-img" tapmode onclick="openHelperShow(1)">
<img class="aui-img-object aui-pull-left" src="image/a1.jpeg">
<div class="aui-img-body">
流浪男
<div class="aui-pull-right laud">
<i class="aui-iconfont aui-icon-likefill"></i> 33
</div>
<p class="helper-tag aui-text-warning">
AUI
</p>
<p class='aui-ellipsis-2'>
無論是大型企業還是初創企業甚至一個尚未啟動的事業，如何進行品牌定位和設計，如何確定自己產品的品牌特性（Brand Identity），營銷團隊如何從0到1建立，傳播和市場營銷活動的設計策劃邏輯是什么，企業在不同階段應該選擇什么樣的傳播策略，什么樣的營銷行動，有效性如何考量？
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img" tapmode onclick="openHelperShow(1)">
<img class="aui-img-object aui-pull-left" src="image/a2.jpeg">
<div class="aui-img-body">
APICloud
<div class="aui-pull-right laud">
<i class="aui-iconfont aui-icon-likefill"></i> 33
</div>
<p class="helper-tag aui-text-warning">
柚子科技
</p>
<p class='aui-ellipsis-2'>
使用標準WEB技術開發跨平臺APP；覆蓋APP全生命周期，包括開發、API集成、測試、渠道打包、運營管理等
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img" tapmode onclick="openHelperShow(1)">
<img class="aui-img-object aui-pull-left" src="image/a1.jpeg">
<div class="aui-img-body">
億天洋
<div class="aui-pull-right laud">
<i class="aui-iconfont aui-icon-likefill"></i> 33
</div>
<p class="helper-tag aui-text-warning">
濰坊億天洋網絡科技有限公司
</p>
<p class='aui-ellipsis-2'>
無論是大型企業還是初創企業甚至一個尚未啟動的事業，如何進行品牌定位和設計，如何確定自己產品的品牌特性（Brand Identity），營銷團隊如何從0到1建立，傳播和市場營銷活動的設計策劃邏輯是什么，企業在不同階段應該選擇什么樣的傳播策略，什么樣的營銷行動，有效性如何考量？
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img" tapmode onclick="openHelperShow(1)">
<img class="aui-img-object aui-pull-left" src="image/a1.jpeg">
<div class="aui-img-body">
流浪男
<div class="aui-pull-right laud">
<i class="aui-iconfont aui-icon-likefill"></i> 33
</div>
<p class="helper-tag aui-text-warning">
AUI
</p>
<p class='aui-ellipsis-2'>
無論是大型企業還是初創企業甚至一個尚未啟動的事業，如何進行品牌定位和設計，如何確定自己產品的品牌特性（Brand Identity），營銷團隊如何從0到1建立，傳播和市場營銷活動的設計策劃邏輯是什么，企業在不同階段應該選擇什么樣的傳播策略，什么樣的營銷行動，有效性如何考量？
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img" tapmode onclick="openHelperShow(1)">
<img class="aui-img-object aui-pull-left" src="image/a1.jpeg">
<div class="aui-img-body">
流浪男
<div class="aui-pull-right laud">
<i class="aui-iconfont aui-icon-likefill"></i> 33
</div>
<p class="helper-tag aui-text-warning">
AUI
</p>
<p class='aui-ellipsis-2'>
無論是大型企業還是初創企業甚至一個尚未啟動的事業，如何進行品牌定位和設計，如何確定自己產品的品牌特性（Brand Identity），營銷團隊如何從0到1建立，傳播和市場營銷活動的設計策劃邏輯是什么，企業在不同階段應該選擇什么樣的傳播策略，什么樣的營銷行動，有效性如何考量？
</p>
</div>
</li>
</ul>
</section>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
api.setRefreshHeaderInfo({
visible: true,
loadingImg: 'widget://tpl/jobteacher/image/refresh.png',
bgColor: '#f4f4f4',
textColor: '#666',
textDown: '下拉刷新',
textUp: '松開刷新',
showTime: false
}, function(ret, err){
api.refreshHeaderLoading();
setTimeout(function(){
api.refreshHeaderLoadDone();
},300)
});
}
function openHelperShow(helperId){
var delay = 0;
if(api.systemType != 'ios'){
delay = 300;
}
api.openWin({
name:'helper_show_win',
url:'helper_show_win.html',
delay:delay
})
}
</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