103 extend 插件入口 jquery eq 和get的封装 拖拽插件

//demo.js

window.onload = function () {
    //个人中心
    $().getClass("member").hover(function(){
        $(this).css("background","url(images/arrow2.png) no-repeat 55px center");
        $().getClass("member_ul").show();
    },function(){
        $().getClass("member_ul").hide();
        $(this).css("background","url(images/arrow.png) no-repeat 55px center");
    });
    //登陆框
    var login=$().getId("login");
    var sreen=$().getId("screen");
    login.center(350,250).resize(function(){
        if (login.css(‘display‘) == ‘block‘) {
            sreen.lock();
        }


    });
    $().getClass("login").click(function(){
        login.css("display","block");
    });
    $().getClass("close").click(function(){
        login.css("display","none");
    });


    $().getClass("login").click(function(){
        login.css("display","block");
        sreen.lock();
    });
    $().getClass("close").click(function(){
        login.css("display","none");
        sreen.unlock();
    });
    //拖拽
  //  login.drag([$().getTagName("span").eq(0),$().getTagName("h2").eq(0)]); //可以指定多个地方拖拽
    login.drag([$().getTagName("h2").get(0)]);//如果有多个h2的话将至运行第一个
    alert($().getTagName("h2").get(0))   //htmlelement

    alert($().getTagName("h2").eq(0))  //object
};

**********************************************0我是分割线0.********************************************************************************

//接下来这个文件时亮点，把拖拽封装成插件

//base_drag.js   

/**
 * Created by Administrator on 2015/5/7.
 */
$().extend("drag",function(tags){
    for(var i=0;i<this.elements.length;i++)
    {  addEvent( this.elements[i],"mousedown",function(e) {


        var _this=this;
        var diffX= e.clientX-_this.offsetLeft;
        var diffY= e.clientY-_this.offsetTop;


        //自定义拖拽区域
        var flag = false;


        for (var i = 0; i < tags.length; i ++) {
            if (e.target == tags[i]) {
                flag = true; //只要有一个是true，就立刻返回
                break;
            }
        }
        if(flag)
        {
            addEvent(document,"mousemove",move);
            addEvent(document,"mouseup",up);
        }
        else
        {
            removeEvent(document,"mousemove",move);
            removeEvent(document,"mouseup",up);
        }


        function move(e){
            var e = getEvent(e);
            // e.preventDefault();//阻止默认事件
            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‘;


            if(_this.setCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
            {
                _this.setCapture();
            }
        }


        function up()
        {
            if(_this.releaseCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件
            {
                _this.releaseCapture();
            }
            removeEvent(document,"mousemove",move);
            removeEvent(document,"mouseup",up);
        }


    });




    }
    return this;
});


//base.js

var $=function(_this)//调用,把this传递过来
{
    return new Base(_this);


};
//对象式
function Base(_this)
{
    //创建一个数组来获取节点和节点的数组
    this.elements=[];//私有化，不共用
    if(_this!=undefined)//这里的_this是一个对象，undefined也是个对象，却别typeof放回的带单引号的 “undefined”
    {
        this.elements[0]=_this; //把this放到数组的第一个
    }


}


//获取ID节点
Base.prototype.getId=function(id)
{
    this.elements.push(document.getElementById(id));
    return this;
};
//获取元素节点
Base.prototype.getTagName=function(tag)
{
    var tags=document.getElementsByTagName(tag);
    for(var i=0;i<tags.length;i++)
    {
        this.elements.push(tags[i]);
    }
    return this;
};
//class获取
Base.prototype.getClass=function(className)
{
    var all=document.getElementsByTagName("*");
    for(var i=0;i<all.length;i++)
    {
        if(all[i].className==className)
        {
            this.elements.push(all[i]);
        }
    }
    return this;
};
//获取某个节点,并且返回Base对象
Base.prototype.eq=function(num)
{
    var element=this.elements[num];
    this.elements=[];//清空数组
    this.elements[0]=element;//重新赋值
    return this;  //返回如jq的eq（）一样的东西
};


//获取某个节点,并且放回这个节点的对象
Base.prototype.get=function(num)//
{
   return this.elements[num];//返回如jq的get（）一样的东西
};
//设置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);//为什么这里需要return呢
        }
        this.elements[i].style[attr] = value;
    }
    return this;
};
Base.prototype.click=function(fn)
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].onclick=fn;
    }
    return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{


    for(var i=0;i<this.elements.length;i++)
    {
        if(arguments.length==0)
        {
            return this.elements[i].innerHTML;
        }
        else
        {
            this.elements[i].innerHTML=value;
        }


    }
    return this;
};
//添加class
Base.prototype.addClass=function(className)
{
    for(var i=0;i<this.elements.length;i++)
    {
        if(!hasClass(this.elements[i],className))//判断是否已经有这个class
        {
            this.elements[i].className+=‘ ‘+className;
        }
    }
    return this;
};
//移出class
Base.prototype.removeClass=function(className) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");
{
    for(var i=0;i<this.elements.length;i++)
    {
        if(hasClass(this.elements[i],className))//判断是否已经有这个class
        {
            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,position) //调用方法， $().addRule(0,"body","background:red",0)
{
    var sheet=document.styleSheets[num];
    if(typeof sheet.insertRule!="undefined")//w3c
    {
        sheet.insertRule(selectorText+"{"+cssText+"}",position);
    }
    else if(typeof  sheet.addRule!="undefined")//iE
    {
        sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
    }
};
//移除link或style的css规则,不常用
Base.prototype.addRule=function(num,index) //调用方法，  $().removeRule(0);
{
    var sheet=document.styleSheets[num];
    if(typeof sheet.deleteRule!="undefined")//w3c
    {
        sheet.deleteRule(index);
    }
    else if(typeof  sheet.removeRule!="undefined")//iE
    {
        sheet.removeRule(index);//sheet.addRule("body","background:red",)
    }
};
//设置hover方法
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;
        addEvent(this.elements[i],"mouseover",over);
        addEvent(this.elements[i],"mouseout",out)
    }
    return this;
};
//添加show
Base.prototype.show=function()
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display="block"


    }
    return this;
};
//添加hide
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=(getInner().height-width)/2;
    var left=(getInner().width-height)/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‘;
            }
        }*/
        addEvent(window,"resize",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.width=getInner().width+"px";
        this.elements[i].style.height=getInner().height+"px";
        this.elements[i].style.display="block";
        document.documentElement.style.overflow = ‘hidden‘;
        addEvent(window,"scroll",scrollTop);
    }


    return this;
};
function scrollTop(){
    document.documentElement.scrollTop=0;// IE W3C
    document.body.scrollTop=0;//火狐
}
Base.prototype.unlock=function()
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display="none";
        document.documentElement.style.overflow = ‘auto‘;
        removeEvent(window,"scroll",scrollTop);
    }


    return this;
};
//插件入口
Base.prototype.extend=function(name,fn)
{
    Base.prototype[name]=fn;
};


/*$().extend("bbb",function(){  //调用方法
   alert("123")
});*/