Jquery實現動態導航欄和輪播導航欄

動態導航欄和輪播導航欄的實現思想：

利用jquery技術的append()方法和bind()方法實現li標簽的添加和點擊事件綁定，在利用$getJSON(url,data,function)請求方法實現獲取springmvc傳遞的list<map<String,Object>>的值。其中還遇到了瀏覽器兼容問題，主要是Mozilla Firefox兼容margin屬性的值的問題，最后解決辦法是：創建2（IE和FireFox）種類型的css樣式，根據myBrowser()自定義方法判斷當前瀏覽器的類型，分配不同的css樣式。

輪播的思想：

設定2個下標變量，一個控制獲取list<map<String,Object>>值的起始位，一個控制list<map<String,Object>>值的結束位置。根據下標變量的值控制輪播按鈕的顯示。

 

遇到的bind()循環添加值添加最后一次循環值的問題，不過已經解決。解決辦法是將bind()里執行的function不要寫在循環里，值傳遞選好的值給functions就可以了。具體的看實現代碼。

以下代碼css部分是在項目中集成的樣式，如果要測試需要自己在修改下。

 

jquery代碼：

$(function () {
    /*獲取標簽的長度*/
    $("#main_center ul").width();
    /*獲取li標簽的個數
     var linum=$("#main_center ul li").length;
     //設定ul標簽的寬度
     var ulwidth=linum*100+50;

     $("#main_center ul").css("width",ulwidth);
     */
    navBar();
    function navBar() {
        //獲取json的導航欄數據信息
        $.getJSON("/Mybatis/navJson",function(data){
            /*總共導航欄的個數*/
            var linum=data.length;
            /*顯示的下標，balcknum代表結束位置，nonenum代表起始位置*/
            var blacknum=12;
            var nonenum=0;
            var gbutton='';
            var bbution='';
            if (myBrowser()=='FF'){
                gbutton="<button id=\"ff_goup\">>></button>";
                bbution="<button id=\"ff_back\"><<</button>";
            }
            if(myBrowser()=='IE'){
                gbutton="<button id=\"goup\">>></button>";
                bbution="<button id=\"back\"><<</button>";
            }
            /*添加導航欄信息顯示向后*/
            if(linum>12){

                //給按鈕綁定修改小標事件
                $("#main_center").append($(gbutton).bind("click",
                    function () {
                        //alert(blacknum+"  "+nonenum);
                        if (12 <= blacknum && blacknum < linum) {
                            /*下標同時加1*/
                            blacknum++;
                            nonenum++;
                        }
                        //控制按鈕的顯示和隱藏操作
                        backgoupHidden(blacknum,linum,nonenum);
                        //情況ul標簽里的信息
                        $("#main_center ul").empty();
                        //alert(blacknum+"  "+nonenum);
                        addNavBar(blacknum, nonenum);
//                //刷新當前頁面
//                window.location.reload();

                    }));

                //導航欄信息顯示的向前
                //給按鈕綁定修改小標事件
                $("#main_center").append($(bbution).bind("click",
                    function () {
                        //alert(blacknum+"  "+nonenum);
                        if(1<=nonenum && nonenum<linum){
                            /*下標同時加1*/
                            blacknum--;
                            nonenum--;
                        }

                        //控制按鈕的顯示和隱藏操作
                        backgoupHidden(blacknum,linum,nonenum);
                        //情況ul標簽里的信息
                        $("#main_center ul").empty();
                        //alert(blacknum+"  "+nonenum);
                        addNavBar(blacknum,nonenum);
//                //刷新當前頁面
//                window.location.reload();

                    }));
            }

            //導航欄初始化，必須執行第一次
            addNavBar(blacknum,nonenum);
            //按鈕初始化，必須先執行一次
            backgoupHidden(blacknum,linum,nonenum);
            //添加導航欄
            function addNavBar(blacknum,nonenum) {
                for(var i=0;i<=linum;i++){

                    if(nonenum<i && i<=blacknum){
                        
                        var j=i-1;
                        var li=$("<li class='licss'>"+data[j].name+"</li>");
                        li.bind("click",{j:j},liBind);
                        
                        /*顯示前10個li標簽*/
                        $("#main_center ul").append(li);
                    }
                }
            }
            
            //綁定事件,必須這樣寫，如果防止for循環里因為作用域的原因，會值執行最后一次的結果
            function liBind(event){
                var k=event.data.j;
                $("#main_bottom").empty();
                $("#main_bottom").append(data[k].url);
            }
            
            //控制導航欄兩邊的前進按鈕和后退按鈕的函數
            function backgoupHidden(blacknum,linum,nonenum) {
                /*必須使用visibility的css屬性，不可以使用display。因為display會消除按鈕占用的空間，
                 * visibility屬性不會消除按鈕占用的空間，執行隱藏和禁用了事件*/
                if(myBrowser()=='IE'){
                    if(blacknum==linum){
                        //隱藏goup
                        $("#goup").css("visibility","hidden");
                    }else {
                        //顯示goup
                        $("#goup").css("visibility","visible");
                    }
                    if(nonenum==0){
                        //隱藏back
                        $("#back").css("visibility","hidden");
                    }else {
                        //顯示back
                        $("#back").css("visibility","visible");
                    }
                }

                if(myBrowser()=='FF'){
                    if(blacknum==linum){
                        //隱藏goup
                        $("#ff_goup").css("visibility","hidden");
                    }else {
                        //顯示goup
                        $("#ff_goup").css("visibility","visible");
                    }
                    if(nonenum==0){
                        //隱藏back
                        $("#ff_back").css("visibility","hidden");
                    }else {
                        //顯示back
                        $("#ff_back").css("visibility","visible");
                    }
                }
            }
        });


    }
    //判斷瀏覽器的類型解決兼容性問題
    function myBrowser(){
        var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判斷是否Opera瀏覽器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判斷是否Firefox瀏覽器
        if (userAgent.indexOf("Chrome") > -1){
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判斷是否Safari瀏覽器
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return "IE";
        }; //判斷是否IE瀏覽器
    }

});

springmvc響應java代碼：

/**
         * 查詢導航欄信息
         * @return List<Map<String,Object>>
         */
        @ResponseBody
        @RequestMapping("/navJson")
        public List<Map<String,Object>>  getNavJson(){
            //聲明map集合
            List<Map<String,Object>> mlist=new ArrayList<Map<String,Object>>();
            //添加map數據
            Map<String,Object> map=new HashMap<String,Object>();
            map.put("name", "流程申請");
            map.put("url", "<iframe src=\"/Mybatis/query1\" width=\"100%\" height=\"100%\"></iframe>");
            mlist.add(map);
            Map<String,Object> map1=new HashMap<String,Object>();
            map1.put("name", "用戶查詢");
            map1.put("url", "<iframe src=\"/Mybatis/query2\" width=\"100%\" height=\"100%\"></iframe>");
            mlist.add(map1);
            Map<String,Object> map2=new HashMap<String,Object>();
            map2.put("name", "流程查詢");
            map2.put("url", "<iframe src=\"/Mybatis/query3\" width=\"100%\" height=\"100%\"></iframe>");
            mlist.add(map2);
            
            //多添加幾個，測試輪播
            for(int i=0;i<20;i++){
                Map<String,Object> map3=new HashMap<String,Object>();
                map3.put("name", "導航欄測試");
                map3.put("url", "<iframe src=\"/Mybatis/query3\" width=\"100%\" height=\"100%\"></iframe>");
                mlist.add(map3);
            }
            
            
            return mlist;
        }

 

jsp頁面代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主頁面</title>
</head>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style type="text/css">
    @import url(css/main.css);
</style>


<body>
<div id="mian_top">
    <span>歡迎使用網上繳費系統！</span>
    <div id="main_top_login">
    <img id="head" src="img/01.jpg"/><br/>
        <span>歡迎${cname}</span>
    </div>
</div>
<div id="main_center">
    <ul>
    </ul>
</div>
<div id="main_bottom">

</div>
<p id="comp">@大中華科技有限公司@</p>
</body>

<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript" src="js/main_navBar.js">
</script>
<script type="text/javascript">
</script>
</html>

css樣式代碼：

@import url(html.css);
body{
    height: 98%;
    margin: 0px;
    padding: 0px;
}

#mian_top{
    border: 1px solid #b82929;
    width: 95%;
    margin: 0px auto;
    height: 15%;
    background:linear-gradient(#b82929, #62ec37);
    background: -webkit-linear-gradient(top,#b82929,#62ec37);
    background: -moz-linear-gradient(top,#b82929,#62ec37);
}
#mian_top span:first-child{
    font-size: 40px;
    margin-top: 30px;
    position: absolute;
}
#main_top_login{
    width: 200px;
    position:absolute;
    margin-left: 85%;
    margin-top: 6px;
}
#main_center{
    height: 5%;
    width: 95%;
    margin: 0px auto;
    border: 1px solid #b82929;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
   
}
#main_center ul{
    margin-left: 3px;
    margin-right: 15px;

}
/*導航欄前進按鈕的css樣式*/
#goup{
    position: absolute;
    margin-left: 1253px; ;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
}
/*支持火狐瀏覽器*/
#ff_goup{
    position: absolute;
    margin-left: 3px;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
}
/*導航欄后退按鈕的css樣式*/
#back{
    position: absolute;
    margin-left: 3px; ;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
}

/*支持火狐瀏覽器*/
#ff_back{
    position: absolute;
    margin-left: -1240px;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);

}

/*導航欄里li標簽的css樣式*/
.licss{
    float: left;
    position: relative;
    margin-top: -10px;
    margin-bottom: 5px;
    width: 100px;
    height: 20px;
    text-align: left;
    list-style: none;
    color:#2820B8;
}
#main_bottom{
    height: 75%;
    width: 95%;
    margin: 0px auto;
    border: 1px solid #b82929;
}
#comp{
    position: relative;
    margin-left: 40%;
}
#head{
    height: 65px;
    width: 65px;

}

上面css代碼引用的html.css

/*判斷客戶機的屏幕大小來確定html的寬度*/
@media  screen and(min-width:1000px){
    html{
        /*設定好html的高度這樣就可以避免div的高度自動變化*/
        width: 1300px;
    }
}
/*判斷客戶機的屏幕大小來確定html的寬度*/
@media  screen and(min-width:800px){
    html{
        /*設定好html的高度這樣就可以避免div的高度自動變化*/
        width: 1300px;
    }
}
html{
    height: 650px;
    width: 1360px;
    margin: 0px auto;
    position: absolute;
}

效果圖片：

 輪播效果：

第一個導航欄顯示情況

中間導航欄顯示

 

 

到達最后一個導航欄顯示

 

 

不需要輪播顯示的情況：