自已写的一个原生底部选项卡的封装

现有的5 app中官方的原生底部tabbar选项卡例子简直反人类，分布在配置文件，util.js，index.html三个文件里面，而且还不会自动判断，稍微改点东西就出错，气到七窍生烟。一怒之下自己写了一个封装，用起来还不错，希望能帮到像我一样的人。
html中的使用方法：

    var tabBarSet = {  
        activeIndex: 0,//载入时激活的选项  
        textSize: "12px",  
        fontSrc: "_www/fonts/mui.ttf",  
        color: "#ccc",  
        colorActive: "#f60",  
        items: [{  
                icon: "\ue262",  
                iconSize: "26px",  
                text: "首页",  
                click: function() {  
                    mess.innerHTML = "点击了首页";  
                    console.log("点击了首页");  
                }  
            },  
            {  
                icon: "\ue464",  
                iconSize: "26px",  
                text: "上传",  
                click: function() {  
                    mess.innerHTML = "点击了上传";  
                    console.log("点击了上传");  
                }  
            },  
            {  
                icon: "\ue502",  
                iconSize: "26px",  
                text: "设置",  
                click: function() {  
                    var theurl = $.json("server") === null ? server : $.json("server");  
                    mui.prompt("请输入服务器地址(需加https://)", theurl, "修改服务器ip地址", function(e) {  
                        if (e.index === 1) {  
                            $.json("server", e.value);  
                            server = e.value;  
                            mui.toast("服务器地址已修改为"   e.value);  
                        }  
                    }, "div");  
                    document.querySelector('.mui-popup-input input').value = theurl;  
                }  
            }  
        ]  
    };  
    mui.plusReady(function() {  
        hh_tabbar(tabBarSet)  
    });

tabbar.js =>

(function() {  
    var xview = plus.nativeObj.View.getViewById("hhtabBar");  
    if (xview != null) {  
        xview.close();  
    }  
    var nview = null;  
    var nviewtags = [];  
    nview = new plus.nativeObj.View("hhtabBar");  
    window.hh_tabbarClear = function() {  
        nview.reset();  
    }  
    window.hh_tabbar = function(tabBarSet) {  
        var persent = 100 / (tabBarSet.items.length);  
        nview.setStyle({  
            left: "0px",  
            bottom: "0px",  
            width: "100%",  
            height: "60px"  
        });  
        nviewtags = [];  
        var currLeft = 0;  
        for (var i = 0; i < tabBarSet.items.length; i++) {  
            var tjson = tabBarSet.items[i];  
            nviewtags.push({  
                tag: "font",  
                id: "bar" + i,  
                text: tjson.icon,  
                position: {  
                    top: "5px",  
                    left: currLeft + "%",  
                    width: persent + "%",  
                    height: "50%"  
                },  
                textStyles: {  
                    fontSrc: tabBarSet.fontSrc,  
                    align: 'center',  
                    color: tabBarSet.color,  
                    size: tjson.iconSize  
                }  
            });  
            nviewtags.push({  
                tag: "font",  
                id: "barText" + i,  
                text: tjson.text,  
                position: {  
                    top: "50%",  
                    left: currLeft + "%",  
                    width: persent + "%",  
                    height: "50%"  
                },  
                textStyles: {  
                    align: 'center',  
                    color: tabBarSet.color,  
                    size: tabBarSet.textSize  
                }  
            });  
            currLeft += persent;  
        }  
        //画最上面的那条线  
        nviewtags.push({  
            tag: 'rect',  
            id: 'BorderTop',  
            position: {  
                top: '0px',  
                left: '0px',  
                width: '100%',  
                height: '1px'  
            },  
            rectStyles: {  
                color: '#ccc'  
            }  
        });  
        nview.draw(nviewtags);  
        var myself = plus.webview.currentWebview();  
        myself.append(nview);  
        var pageW = window.innerWidth;  
        nview.addEventListener("click", function(e) {  
            var clientX = e.clientX;  
            var currIndex = 0;  
            var widthBlock = pageW / tabBarSet.items.length;  
            for (var i = 0; i < tabBarSet.items.length; i++) {  
                if (e.clientX > i * widthBlock && e.clientX < (i + 1) * widthBlock) {  
                    currIndex = i;  
                    tabbarUpdate(i, tabBarSet.colorActive);  
                } else {  
                    tabbarUpdate(i, tabBarSet.color);  
                }  
            }  
            tabBarSet.items[currIndex].click.apply(nview, [e]);  
        });  
        for (var i = 0; i < tabBarSet.items.length; i++) {  
            if (tabBarSet.activeIndex === i) {  
                tabbarUpdate(i, tabBarSet.colorActive);  
            } else {  
                tabbarUpdate(i, tabBarSet.color);  
            }  
        }  
    };  
    var tabbarUpdate = function(TheIndex, TheColor) {  
        var thetag = nviewtags[TheIndex * 2];  
        thetag.textStyles.color = TheColor;  
        nview.drawText(thetag.text, thetag.position, thetag.textStyles, "bar" + TheIndex);  

        thetag = nviewtags[TheIndex * 2 + 1];  
        thetag.textStyles.color = TheColor;  
        nview.drawText(thetag.text, thetag.position, thetag.textStyles, "barText" + TheIndex);  
    }  
})();