H5移动开发底部导航-博客园老牛大讲堂

一、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>

 

 四、效果截图//博客园老牛大讲堂

其中红色的是红色的图片，没有红色的也是图片。

 

posted @ 2016-09-08 08:57  老牛大讲堂  阅读(8296)  评论(6)    收藏  举报