css_js_层窗口

JaHunter

浏览: 89358 次
性别:
来自: 北京

最近访客更多访客>>

梁静茹的小三

hgq114

zhenghuiqiang316

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS prototype IE XHTML Blog

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<br /><br /><br /><br />

var isIE = (document.all) ? true : false;

var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);

function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
}
}

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

Function.prototype.bind = function(object) {
var __method = this, args = Array.apply(null, arguments); args.shift();
return function() {
return __method.apply(object, args);
}
}

if(!isIE){
    HTMLElement.prototype.__defineGetter__("currentStyle", function () {
        return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });
}

//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象,触发对象
initialize: function(obj, drag, options) {
    var oThis = this;

    this._obj = $(obj);//拖放对象
    this.Drag = $(drag);//触发对象
    this._x = this._y = 0;//记录鼠标相对拖放对象的位置
    //事件对象(用于移除事件)
    this._fM = function(e){ oThis.Move(window.event || e); }
    this._fS = function(){ oThis.Stop(); }

    this.SetOptions(options);

    this.Limit = !!this.options.Limit;
    this.mxLeft = parseInt(this.options.mxLeft);
    this.mxRight = parseInt(this.options.mxRight);
    this.mxTop = parseInt(this.options.mxTop);
    this.mxBottom = parseInt(this.options.mxBottom);
    this.mxContainer = this.options.mxContainer;

    this.onMove = this.options.onMove;
    this.Lock = !!this.options.Lock;

    this._obj.style.position = "absolute";
    addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
        Limit:            false,//是否设置限制(为true时下面参数有用,可以是负数)
        mxLeft:            0,//左边限制
        mxRight:        0,//右边限制
        mxTop:            0,//上边限制
        mxBottom:        0,//下边限制
        mxContainer:    null,//指定限制在容器内
        onMove:            function(){},//移动时执行
        Lock:            false//是否锁定
    };
    Object.extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
    if(this.Lock){ return; }
    //记录鼠标相对拖放对象的位置
    this._x = oEvent.clientX - this._obj.offsetLeft;
    this._y = oEvent.clientY - this._obj.offsetTop;
    //mousemove时移动 mouseup时停止
    addEventHandler(document, "mousemove", this._fM);
    addEventHandler(document, "mouseup", this._fS);
    //使鼠标移到窗口外也能释放
    if(isIE){
        addEventHandler(this.Drag, "losecapture", this._fS);
        this.Drag.setCapture();
    }else{
        addEventHandler(window, "blur", this._fS);
    }
},
//拖动
Move: function(oEvent) {
    //判断是否锁定
    if(this.Lock){ this.Stop(); return; }
    //清除选择(ie设置捕获后默认带这个)
    window.getSelection && window.getSelection().removeAllRanges();
    //当前鼠标位置减去相对拖放对象的位置得到offset位置
    var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
    //设置范围限制
    if(this.Limit){
        //如果设置了容器,因为容器大小可能会变化所以每次都要设
        if(!!this.mxContainer){
            this.mxLeft = this.mxTop = 0;
            this.mxRight = this.mxContainer.clientWidth;
            this.mxBottom = this.mxContainer.clientHeight;
        }
        //获取超出长度
        var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
        //这里是先设置右边下边再设置左边上边,可能会不准确
        if(iRight > 0) iLeft -= iRight;
        if(iBottom > 0) iTop -= iBottom;
        if(this.mxLeft > iLeft) iLeft = this.mxLeft;
        if(this.mxTop > iTop) iTop = this.mxTop;
    }
    //设置位置
    //由于offset是把margin也算进去的所以要减去
    this._obj.style.left = iLeft - (parseInt(this._obj.currentStyle.marginLeft) || 0) + "px";
    this._obj.style.top = iTop - (parseInt(this._obj.currentStyle.marginTop) || 0) + "px";
    //附加程序
    this.onMove();
},
//停止拖动
Stop: function() {
    //移除事件
    removeEventHandler(document, "mousemove", this._fM);
    removeEventHandler(document, "mouseup", this._fS);
    if(isIE){
        removeEventHandler(this.Drag, "losecapture", this._fS);
        this.Drag.releaseCapture();
    }else{
        removeEventHandler(window, "blur", this._fS);
    }
}
};

</script>

<dl id="idBox" class="lightbox">
<dt id="idBoxHead"><b>LightBox</b> </dt>
<dd>
    选择效果显示
    <br /><br />
    <input name="" type="button" value=" 关闭 " id="idBoxCancel" /><br /><br />
</dd>
</dl>

<input name="" type="button" value="关闭覆盖层" id="btnOverlay" />
<input name="" type="button" value="黑色覆盖层" id="btnOverColor" />
<input name="" type="button" value="全透覆盖层" id="btnOverOpacity" />
<input name="" type="button" value="取消居中" id="btnCenter" />
<br /><br />
选择效果：<br />
<select id="idEffect">
<option value="0">还原效果</option>
<option value="4">定位效果</option>
<option value="2">设置拖放</option>
<option value="6">视框定位拖放</option>
</select>
<input name="" type="button" value=" 打开 " id="idBoxOpen" />

var box = new LightBox("idBox", "idOverlay", { Center: true });

var drag = new Drag("idBox", "idBoxHead", { mxContainer: document.documentElement, Lock: true });

$("idBoxCancel").onclick = function(){ box.Close(); }
$("idBoxOpen").onclick = function(){ box.Show(); }

$("idEffect").onchange = function(){
    box.Close();

    switch (parseInt(this.value)) {
        case 4 :
            box.Fixed = true;
            drag.Lock = true;
            drag.Limit = false;
            break;
        case 2 :
            box.Fixed = false;
            drag.Lock = false;
            drag.Limit = false;
            break;
        case 6 :
            box.Fixed = true;;
            drag.Lock = false;
            drag.Limit = true;
            break;
        case 0 :
        default :
            box.Fixed = false;
            drag.Lock = true;
            drag.Limit = false;
    }
}

$("btnOverlay").onclick = function(){
    box.Close();
    if(box.Over){
        box.Over = false;
        this.value = "打开覆盖层";
    } else {
        box.Over = true;
        this.value = "关闭覆盖层";
    }
}

$("btnOverColor").onclick = function(){
    box.Close();
    box.Over = true;
    if(box.OverLay.Color == "#fff"){
        box.OverLay.Color = "#000";
        this.value = "白色覆盖层";
    } else {
        box.OverLay.Color = "#fff"
        this.value = "黑色覆盖层";
    }
}

$("btnOverOpacity").onclick = function(){
    box.Close();
    box.Over = true;
    if(box.OverLay.Opacity == 0){
        box.OverLay.Opacity = 50;
        this.value = "全透覆盖层";
    } else {
        box.OverLay.Opacity = 0;
        this.value = "半透覆盖层";
    }
}

$("btnCenter").onclick = function(){
    box.Close();
    if(box.Center){
        box.Center = false;
        this.value = "设置居中";
    } else {
        box.Center = true;
        this.value = "取消居中";
    }
}

</script>

</div>

</html>

来自:http://hi.baidu.com/bing2liuliu/blog/item/cff28af82c850d53242df2dd.html

分享到：

js_css_ceng2 | 弹出式窗口大全

2009-10-31 10:25
浏览 838
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css_js_层窗口

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css_js_层窗口

评论

发表评论

相关推荐

js_css_ceng2

弹出式窗口大全

js日期联动

js 常用代码

checkbox多选

Javascript二级联动

JS二级联动

网页常用小技巧(javascript)----转载---金斌ID：xiaolang85

最近访客更多访客>>