jquery 做出專業的界面，SHOW 一下最近的成果~~~

最近在項目中把整個UI框架重新做了一下，都是用Jquery實現的，沒有使用EXT、EasyUI那一類的UI框架再也不用擔心版權問題啦~~~~~~

接下來我會在博客中把常用的功能分享出來，先上一下動態Tab的，功能基本和EasyUI里的tab類似。

實現原理:

            1、點擊菜單項新增一個div然后在div里打開一個iframe。

            2、有了div當容器就很好控制樣式，讓tab看起來很舒服。

            3、tab的切換其實就是div的隱藏和顯示。

            4、通過把頁面的名稱存放到div的屬性里可以防止重復打開div。

            5、控制div的總個數可以防止用戶打開過多的頁面。

效果圖如下：

           

Jquery代碼如下：

//=================動態tab標簽========================
function AddTabMenu(tabid, _url, name, img, Isclose) {
    try {
        var url = _url;
        if (url == "" || url == "#") {
            url = "/WMSErrorPage/404.aspx";
        }
        top.$("#Current_iframe").val("div_" + tabid);
        if (Isclose != 'false') { //判斷是否帶關閉tab
            top.$(".navigation").hide();
            top.$("#side_switch").hide();
        } else {
            top.$(".navigation").show();
        }
        ///如果當前tabid存在直接顯示已經打開的tab
        if (top.document.getElementById("div_" + tabid) == null) {
            Loading(true);
            //遍歷並清除開始存在的tab當前效果並隱藏其顯示的div
            var tablist = top.document.getElementById("div_tab").getElementsByTagName('li');
            var pannellist = top.document.getElementById("ContentPannel").getElementsByTagName('iframe');
            if (tablist.length > 5) {
                showConfirmMsg('您當前打開太多頁面,如果繼續打開,會造成程序運行緩慢,無法流暢操作！', function (r) {
                    if (r) {
                        //創建iframe
                        var box = document.createElement("iframe");
                        box.id = "div_" + tabid;
                        box.name = "div_" + tabid;
                        box.src = url;
                        box.height = "100%";
                        box.frameBorder = 0;
                        box.width = "100%";
                        top.document.getElementById("ContentPannel").appendChild(box);
                        if (tablist.length > 0) {
                            for (i = 0; i < tablist.length; i++) {
                                tablist[i].className = "";
                                pannellist[i].style.display = "none";
                            }
                        }
                        //創建li菜單
                        var tab = document.createElement("li");
                        tab.id = tabid;
                        var litxt = "";
                        if (Isclose != 'false') { //判斷是否帶關閉tab
                            litxt = "<span onclick=\"javascript:AddTabMenu('" + tabid + "','" + url + "','" + name + "','" + img + "','true')\" title=" + name + "><a href=\"javascript:;\"><img src='/Themes/Images/32/" + img + "' width='20' height='20' />" + suolve(name) + "</a></span><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"關閉當前窗口\"></a>";
                        } else {
                            tab.setAttribute("onclick", "javascript:AddTabMenu('" + tabid + "','" + url + "','" + name + "','" + img + "','false');");
                            litxt = "<a href=\"javascript:;\"  title=" + name + "><img src='/Themes/Images/32/" + img + "' width='20' height='20' />" + suolve(name) + "</a>";
                        }
                        tab.innerHTML = litxt;
                        tab.className = "menuselected";
                        top.document.getElementById("div_tab").appendChild(tab);
                    }
                });
            } else {
                //創建iframe
                var box = document.createElement("iframe");
                box.id = "div_" + tabid;
                box.name = "div_" + tabid;
                box.src = url;
                box.height = "100%";
                box.frameBorder = 0;
                box.width = "100%";
                top.document.getElementById("ContentPannel").appendChild(box);
                if (tablist.length > 0) {
                    for (i = 0; i < tablist.length; i++) {
                        tablist[i].className = "";
                        pannellist[i].style.display = "none";
                    }
                }
                //創建li菜單
                var tab = document.createElement("li");
                tab.id = tabid;
                var litxt = "";
                if (Isclose != 'false') { //判斷是否帶關閉tab
                    litxt = "<span onclick=\"javascript:AddTabMenu('" + tabid + "','" + url + "','" + name + "','" + img + "','true')\" title=" + name + "><a href=\"javascript:;\"><img src='/Themes/Images/32/" + img + "' width='20' height='20' />" + suolve(name) + "</a></span><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"關閉當前窗口\"></a>";
                } else {
                    tab.setAttribute("onclick", "javascript:AddTabMenu('" + tabid + "','" + url + "','" + name + "','" + img + "','false');");
                    litxt = "<a href=\"javascript:;\"  title=" + name + "><img src='/Themes/Images/32/" + img + "' width='20' height='20' />" + suolve(name) + "</a>";
                }
                tab.innerHTML = litxt;
                tab.className = "menuselected";
                top.document.getElementById("div_tab").appendChild(tab);
            }
        }
        else {
            var tablist = top.document.getElementById("div_tab").getElementsByTagName('li');
            var pannellist = top.document.getElementById("ContentPannel").getElementsByTagName('iframe');
            for (i = 0; i < tablist.length; i++) {
                tablist[i].className = "";
                pannellist[i].style.display = "none"
            }
            top.document.getElementById(tabid).className = 'menuselected';
            top.document.getElementById("div_" + tabid).style.display = 'block';
        }
    } catch (e) {

    }
}
//關閉事件
function RemoveDiv(obj) {
    try {
        var ob = top.document.getElementById(obj);
        ob.parentNode.removeChild(ob);
        var obdiv = top.document.getElementById("div_" + obj);
        obdiv.parentNode.removeChild(obdiv);
        var tablist = top.document.getElementById("div_tab").getElementsByTagName('li');
        var pannellist = top.document.getElementById("ContentPannel").getElementsByTagName('iframe');
        if (tablist.length > 0) {
            tablist[tablist.length - 1].className = 'menuselected';
            pannellist[tablist.length - 1].style.display = 'block';
            top.$("#Current_iframe").val(pannellist[tablist.length - 1].id);
        }
        if (tablist.length == '1') {
            top.$(".navigation").show();
        }
    } catch (e) {

    }
}

Css樣式如下

/*動態Tab
------------------------------------------------*/
#div_tab li{float:left;text-align:center;position:relative;list-style:none;}
        
#div_tab li{height:30px;}
#div_tab li span{height:30px;line-height:29px;}
        
#div_tab li.crent{height:30px;}
#div_tab li.crent span{height:30px;line-height:29px;}
        
#div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;}        
#div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 15px 0 0px;background-repeat:no-repeat;background-position:right bottom;}
        
#div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}
#div_tab li.crent .menua,#div_tab li .menua:hover{}
#div_tab li .win_close,#div_tab li.crent .win_close{width:13px;height:13px;position:absolute;top:8px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(../images/tab_delete_ico.png) no-repeat;}                
#div_tab li .win_close{background-position:0 -10px;    position: absolute;
    z-index: 1;}
#div_tab li .win_close:hover{background-position:0 2px;}
#div_tab img
{
    vertical-align: middle;
    margin: 0px 5px 0px 0px;
    padding-bottom:3px;
}   
.menuselected
{
   background:#FFF;
} 
#dww-menu { width:auto;margin:auto; overflow:hidden;}
#dww-menu .mod-hd li { float:left; cursor:pointer; text-align:center; height:30px; line-height:29px; padding:0 10px; letter-spacing:1px; text-transform:uppercase; border-right:1px #dcdcdc solid }
#dww-menu .mod-hd li:hover {background:#FFF }

 

 下面再補幾張效果圖：

 下一篇介紹菜單導航

 

當然圖片就先曬到這邊啦！如果你覺得可以把這些圖片的設計思路理解，並且覺得以后會用的話，請收藏一下，推薦一下啦!

對於一些界面看完讓我內心想對他說三個字"毀三觀"的界面，我只能說你的審美水平一定要提高的，IT這是一個潮流的行業，如果你不潮，那就無法與眾不同，機遇往往會給你留個位置的！大家說呢？

 http://www.learun.cn

http://www.learun.cn:8080

有興趣的朋友歡迎加群討論：312677516