博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js面象对象插件+历史管理
阅读量:4628 次
发布时间:2019-06-09

本文共 4838 字,大约阅读时间需要 16 分钟。

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;

 

转载于:https://www.cnblogs.com/yanwen2015/p/4947382.html

你可能感兴趣的文章
SQL Server DB Link相关
查看>>
2017 .NET 開發者須知
查看>>
判断ie版本
查看>>
document.readystate
查看>>
数据库访问性能优化
查看>>
面向对象(类的概念,属性,方法,属性的声明,面向对象编程思维
查看>>
word 生成HTML
查看>>
JSONP--解决ajax跨域问题
查看>>
iOS 的本地化使用和创建过程
查看>>
继承上机作业
查看>>
TSP问题——动态规划
查看>>
java多线程三之线程协作与通信实例
查看>>
japid-controller自动绑定的数据类型
查看>>
vm.max_map_count
查看>>
OSI模型第四层传输层--TCP协议
查看>>
web service 项目 和 普通 web项目 的 区别
查看>>
Linux结构目录
查看>>
ajax frameworks(转贴)
查看>>
javascript禁止修改对象
查看>>
What Are Words(一诺千金)
查看>>