js面象对象插件+历史管理

var oSwitch = function(el, options) {
    this.dom = null;
    this.header = null;
    this.footer = null;
    return new oSwitch.prototype.init(el, options);
};

oSwitch.prototype = {
    constructor: oSwitch,
    init: function(el, options) {
        this.dom = (typeof el === "string") ? document.querySelector(el) : el;
        this.settings = {
            bottomNav: [{
                title: "", //标题
                img: "", //图片
                imgCurrent: "", //当前图片
                classHash: "" //class和hash值(一样)
            }], //底部栏目内容
            NavbgW: "10px", //图片宽
            NavbgH: "10px", //图片高
            NavTop: "3px", //距离上边距
            bottomHeight: "35px", //底部栏高度
            currentColor: "red" //当前文字颜色
        };

        for (var i in options) {
            this.settings[i] = options[i];
        };
        this.isBottom(this.settings.bottomNav);
    },

    isBottom: function(num) {
        var _this = this,
            arr = [],
            adom = [];
        if (num.length === 0) {
            return false;
        }

        this.footer = document.createElement("footer");
        this.footer.className = "oFooter";
        this.footer.style.height = this.settings.bottomHeight;
        this.dom.appendChild(this.footer);

        for (var key in num) {
            if (!num.hasOwnProperty(key) || ("title" in num[key] && num[key]["title"] !== "")) {
                arr.push(num[key]["classHash"]);
                var nav = document.createElement("nav");
                nav.style.position = "relative";
                nav.innerHTML = num[key]["title"];
                if (!num[key]["classHash"]) {
                    nav.setAttribute("data-hash", "");
                } else {
                    nav.setAttribute("data-hash", num[key]["classHash"]);
                }
                nav.setAttribute("index", key);
                this.footer.appendChild(nav);
                adom.push(nav);
                if (IsPC) {
                    nav.addEventListener("click", fnchange, false);
                } else {
                    nav.addEventListener("touchstart", fnchange, false);
                }
                var oImg = document.createElement("img");
                oImg.style.width = this.settings.NavbgW;
                oImg.style.height = this.settings.NavbgH;
                oImg.style.position = "absolute";
                oImg.style.left = Math.ceil((this.footer.clientWidth / num.length - parseInt(oImg.style.width)) / 2) + "px";
                oImg.style.top = this.settings.NavTop;
                if (!num[key]["img"]) {
                    oImg.src = getRootPath() + "/";
                } else {
                    oImg.src = getRootPath() + "/" + num[key]["img"];
                }
                nav.appendChild(oImg);
            }
        }

        function fnchange() {
            var hash = this.dataset.hash; //获取hash
            window.location.hash = hash; //传给url
            for (var i = 0; i < adom.length; i++) {
                adom[i].style.color = "";
                adom[i].querySelector("img").src = num[i]["img"];
            }
            this.querySelector("img").src = num[this.getAttribute("index")]["imgCurrent"];
            this.style.color = _this.settings.currentColor;
        }

        window.onhashchange = hashchange; //url发现改变页面跟着变
        hashchange();

        function hashchange() {
            var firstHash = window.location.hash.substring(1) || arr[0];
            for (var attr in arr) {
                adom[attr].style.color = "";
                adom[attr].querySelector("img").src = num[attr]["img"];
                if (firstHash === arr[attr]) {
                    adom[attr].querySelector("img").src = num[attr]["imgCurrent"];
                    adom[attr].style.color = _this.settings.currentColor;
                }
                if (document.querySelector("." + arr[attr])) {
                    document.querySelector("." + arr[attr]).style.display = "none";
                    document.querySelector("." + firstHash).style.display = "block";
                }
            }

        };
    }
};


function getRootPath() {
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPaht = curWwwPath.substring(0, pos);
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPaht + projectName);
}

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"
    ];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}


oSwitch.prototype.init.prototype = oSwitch.prototype;