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;