一、H5分類//博客園老牛大講堂
網頁開發，移動開發，移動混合開發，
二、所用知識點：//博客園老牛大講堂
APICloud：APICloud是為了開發APP的，所以如果用H5開發的移動端，需要發送短信，獲取照相機等就要用APICloud的了。
aui框架：aui框架就是專門開發移動端的框架。
三、怎樣用H5開發移動端？//博客園老牛大講堂
我建議如果用H5開發移動端，全都用H5網頁開發。如果涉及到發送短信和照相等操作，再用APICoud開發。
<!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">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
</head>
<body>
//博客園老牛大講堂
<div id="tbodyCenter">
</div>
<footer class="aui-nav" id="footer" style="border-top: 1px solid #dbdbdb;z-index:9">
<ul class="aui-bar-tab" id="parent">
<li >
<img src="../../image/main_2.png" style="width: 25px;padding-top: 5px;" />
<p class="aui-text-danger">
首頁
</p>
</li>
<li>
<img src="../../image/mall.png" style="width: 25px;padding-top: 5px;" />
<p>
發現
</p>
</li>
<li>
<img src="../../image/find.png" style="width: 25px;padding-top: 5px;" />
<p>
收藏
</p>
</li>
<li >
<img src="../../image/user.png" style="width: 25px;padding-top: 5px;" />
<p>
我的
</p>
</li>
</ul>
</footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript">
var listfont=document.getElementById("parent").getElementsByTagName("p");
var listimg=document.getElementById("parent").getElementsByTagName("img");
var listli=document.getElementById("parent").children;
for(var i=0;i<listli.length;i++)
{
listli[i].index=i;
listli[i].onclick=function(i)
{
initimg();//初始化img
initfont(listli.length);//初始化font
switchImg(this.index);//改變圖片
listfont[this.index].className="aui-text-danger";//改變font
panduan(this.index);
};
};
function initimg(){
listimg[0].setAttribute("src","../../image/main.png");
listimg[1].setAttribute("src","../../image/mall.png");
listimg[2].setAttribute("src","../../image/find.png");
listimg[3].setAttribute("src","../../image/user.png");
}
function initfont(index) {
for(var i=0;i<index;i++)
{
listfont[i].className="";
}
}
function switchImg(index){
switch(index){
case 0:
listimg[0].setAttribute("src","../../image/main_2.png");
break;
case 1:
listimg[1].setAttribute("src","../../image/mall_2.png");
break;
case 2:
listimg[2].setAttribute("src","../../image/find_2.png");
break;
case 3:
listimg[3].setAttribute("src","../../image/user_2.png");
break;
}
}
function panduan(index){
switch(index){
case 0:
$("#tbodyCenter").load("../first/first.html");
break;
case 1:
break;
case 2:
break;
case 3:
$("#tbodyCenter").load("../fourth/my.html");
break;
}
}
</script>
//博客園老牛大講堂
</html>
四、效果截圖//博客園老牛大講堂
其中紅色的是紅色的圖片，沒有紅色的也是圖片。
