day03

/**
 * Created by zhouyan on 15/4/26.
 */


//前台调用
var $=function(_this){
    return new Base(_this);
}


//基础库
function Base(_this){

    //创建一个数组，来保存获取的节点和节点数组
    this.elements=[];

    if(_this != undefined){
        this.elements[0]=_this;
    }


    //获取ID节点
    this.getId=function(id){
        this.elements.push(document.getElementById(id));
        return this;
    };

    //获取元素节点
    this.getTagName=function(tagName){
        var tags=document.getElementsByTagName(tagName);
        for(var i=0;i<tags.length;i++){
            this.elements.push(tags[i]);
        }
        return this;
    };

    //获取Class节点
    this.getClass=function(className,idName){
        var node = null;
        if(arguments.length == 2){
            node = document.getElementById(idName);
        }else{
            node = document;
        }
        var all=node.getElementsByTagName(‘*‘);
        for(var i=0;i<all.length;i++) {
            if (all[i].className == className) {
                this.elements.push(all[i])
            }
        }
        return this;
    }

}


//设置css
Base.prototype.css=function(attr,value){
    for(var i=0;i<this.elements.length;i++) {
        if(arguments.length == 1){
            return getStyle(this.elements[i],attr);
        }
        this.elements[i].style[attr] = value;
    }
    return this;
}

//设置innerHTML
Base.prototype.html=function(str){
    for(var i=0;i<this.elements.length;i++) {
        if(arguments.length == 0){
            return this.elements[i].innerHTML;
        }
        this.elements[i].innerHTML = str;
    }
    return this;
}

//触发点击事件
Base.prototype.click=function(fn){
    for(var i=0;i<this.elements.length;i++) {
        this.elements[i].onclick=fn;
    }
    return this;
}

//获取某一个节点
Base.prototype.getElement =function(num){
    var element =this.elements[num];
    this.elements = [];
    this.elements[0] =element;
    return this;
}

//添加Class
Base.prototype.addClass = function(className){
    for(var i=0;i<this.elements.length;i++){
        if(!hasClass(this.elements[i],className)) {
            this.elements[i].className += ‘ ‘+className;
        }
    }
    return this;
}

//移除Class
Base.prototype.removeClass = function(className){
    for(var i=0;i<this.elements.length;i++){
        if(hasClass(this.elements[i],className)) {
            this.elements[i].className=this.elements[i].className.replace(new RegExp(‘(\\s|^)‘+className+‘(\\s|$)‘),‘‘);
        }
    }
    return this;
}

//添加link或style的css规则
Base.prototype.addRule = function(num,selectorText,cssText,pos){
    var sheet = document.styleSheets[num];
    insertRule(sheet,electorText,cssText,pos);
    return this;
}

//移除link或style的css规则
Base.prototype.removeRule = function(num,pos){
    var sheet = document.styleSheets[num];
    deleteRule(sheet,pos);
    return this;
}

//设置鼠标移入移出方法
Base.prototype.hover = function(over,out){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].onmouseover=over;
        this.elements[i].onmouseout=out;
    }
    return this;
}

//设置显示
Base.prototype.show =function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="block";
    }
    return this;
}

//设置隐藏
Base.prototype.hide =function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="none";
    }
    return this;
}

//设置物体居中
Base.prototype.center = function(width,height){
    var top = (document.documentElement.clientHeight - height)/2;
    var left = (document.documentElement.clientWidth - width)/2;
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.top=top+‘px‘;
        this.elements[i].style.left=left+‘px‘;
    }
    return this;
}

//触发浏览器窗口事件
Base.prototype.resize = function(fn){
    for(var i=0;i<this.elements.length;i++){
        var element=this.elements[i];
        window.onresize=function(){
            fn();
            if(element.offsetLeft > getInner().width - element.offsetWidth){
                element.style.left=getInner().width - element.offsetWidth+‘px‘;
            }
            if(element.offsetTop > getInner().height - element.offsetHeight){
                element.style.top=getInner().height - element.offsetHeight+‘px‘;
            }
        }

    }
    return this;
}

//锁屏功能
Base.prototype.lock = function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display=‘block‘;
        this.elements[i].style.width=getInner().width+‘px‘;
        this.elements[i].style.height=getInner().height+‘px‘;
        document.documentElement.style.overflow=‘hidden‘;
    }
    return this;
}

//解屏功能
Base.prototype.unlock = function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display=‘none‘;
        document.documentElement.style.overflow=‘auto‘;
    }
    return this;
}

//拖拽功能
//拖拽流程
//1.先点下去
//2.再点下的物体被选中，进行move移动
//3.抬起鼠标，停止移动
//点击某个物体，用Div即可，move和up是全局区域，也就是整个文档通用，应该用document
Base.prototype.drag= function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].onmousedown = function(e){
            preDef(e);
            var e=getEvent(e);
            var _this=this;
            var diffX= e.clientX- _this.offsetLeft;
            var diffY= e.clientY- _this.offsetTop;

            if(typeof _this.setCapture != ‘undefined‘){
                _this.setCapture();
            }

            document.onmousemove = function(e){
                var e=getEvent(e);

                var left=e.clientX-diffX;
                var top=e.clientY-diffY;

                if(left<0){
                    left=0;
                }else if(left> getInner().width - _this.offsetWidth){
                    left=getInner().width - _this.offsetWidth;
                }

                if(top<0){
                    top=0;
                }else if(top> getInner().height - _this.offsetHeight){
                    top= getInner().height - _this.offsetHeight
                }

                _this.style.left= left+‘px‘;
                _this.style.top= top+‘px‘;


            }

            document.onmouseup= function(e){
                this.onmousemove =null;
                this.onmouseup =null;
                if(typeof _this.releaseCapture != ‘undefined‘){
                    _this.releaseCapture();
                }
            }

        }
    }
    return this;
}

/**
 * Created by zhouyan on 15/4/27.
 */


//跨浏览器获取视口大小
function getInner(){
    if(typeof window.innerWidth != ‘undefined‘){
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }else{
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}

//跨浏览器获取Style
function getStyle(element,attr){
    if(typeof window.getComputedStyle !="undefined"){//W3C
        return window.getComputedStyle(element,null)[attr];
    }else if(typeof element.currentStyle != ‘undefined‘){//IE
        return element.currentStyle[attr];
    }
}

//判断Class是否存在
function hasClass(element,className){
    element.className.match(new RegExp(‘(\\s|^)‘+className+‘(\\s|$)‘));
}

//跨浏览器添加link规则
function insertRule(sheet,selectorText,cssText,pos){
    if(typeof sheet.insertRule != ‘undefined‘){   //w3c
        sheet.insertRule(selectorText+‘{‘+cssText+‘}‘,pos);
    }else if(typeof sheet.addRule != ‘undefined‘){ //Ie
        sheet.addRule(selectorText,cssText,pos);
    }
}

//跨浏览器删除link规则
function deleteRule(sheet,pos){
    if(typeof sheet.deleteRule != ‘undefined‘){   //w3c
        sheet.deleteRule(pos);
    }else if(typeof sheet.removeRule != ‘undefined‘){ //Ie
        sheet.removeRule(pos);
    }
}

////获取Event对象
//function getEvent(event){
//    return event|| window.event;
//}
//
////阻止默认行为
//function preDef(event){
//    var e=getEvent(event);
//    if(typeof e.preventDefault != ‘undefined‘){
//        e.preventDefault();
//    }else{
//        e.returnValue = false;
//    }
//}

//为每个事件分配以一个计数器
addEvent.ID=1;
//跨浏览器事件绑定
function addEvent(obj,type,fn){
    if(typeof obj.addEventListener != ‘undefined‘){
        obj.addEventListener(type,fn,false);
    }else{
        if(!obj.events) obj.events = {};
        if(!obj.events[type]){
            obj.events[type]=[];
            obj.events[type][0]=fn;
        }else{
            for(var i in  obj.events[type]){
                if(obj.events[type][i] != fn){
                    obj.events[type][addEvent.ID++] = fn;
                }
            }
        }

        obj[‘on‘+type]=addEvent.exec;
    }
}

//执行事件处理函数
addEvent.exec = function(event){
    var e=event || addEvent.fixEvent(window.event);
    var es=this.events[e.type];
    for(var i in es){
        es[i].call(this,e);
    }
}

//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent =function(event){
    event.preventDefault = addEvent.fixEvent.preventDefault;
    event.stopPropagation = addEvent.fixEvent.stopPropagation;
    return event;
}

//IE 阻止默认行为
addEvent.fixEvent.preventDefault =function(){
    this.returnValue=false;
}

//IE 取消冒泡
addEvent.fixEvent.stopPropagation =function(){
    this.cancelBubble =true;
}


//跨浏览器删除事件
function removeEvent(obj,type,fn){
    if(typeof obj.removeEventListener != ‘undefined‘){
        obj.removeEventListener(type,fn,false);
    }else{
        for(var i in  obj.events[type]){
            if(obj.events[type][i] == fn){
                delete obj.events[type][i];
            }
        }
    }
}