posts - 165, comments - 198, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

ajax javascript 弹出框

Posted on 2008-08-14 14:11 G_G 阅读(1509) 评论(1)  编辑  收藏 所属分类: javascript
demo 下载: http://www.blogjava.net/Files/Good-Game/div_.rar
运行 div.html


html:
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="drag.js"></script>
<META http-equiv=Content-Type content="text/html; charset=utf8">
</head>

<body>
<a
    
onclick="getDrag(event,
                     'ajax.html?id=5',
                     'position:absolute;display:none;left:50;  top:10;  z-index:1000;  padding:0px;  background-color:#FFFFCC;  color:#201000;  font-size:12px;  border:5px   solid   #284860;',
                      'background-color:#CCFFCC;')"
>测试使用(请点击)
</a>
</body>
</html>



js.
// 参考 : http://hi.baidu.com/foxlively/blog/item/0ce341b3f0c050a2d8335af8.html
//
 使用 : prototype.js 
//
使用方法 
var _div1 = null;
var _style2 = null;

function getDrag(event, url,divId, style1, style2) {
    
    
if (style2)
        _style2 
= style2;
    
else
        _style2 
= "";
    
    
if(divId==null)
        _div1 
= document.createElement("div");
    
else
        _div1 
= document.getElementById(divId);
    
    _div1.style.position 
= 'absolute';
    _div1.style.display 
= 'none';

    
if (_div1.style.border == null || _div1.style.border == '')
        _div1.style.border 
= '1px solid #284860';

    
if (style1)
        _div1.setAttribute('style', style1);
    actionAjax(url);
    document.body.appendChild(_div1);
    showByEvent(event, _div1);
}


function getActionName(url) {
    
var question = url.indexOf("?");
    
if (question > 0) {
        
return url.substring(0, question);
    }
    
else {
        
return url;
    }
}

function getActionPars(url) {
    
var question = url.indexOf("?");
    
if (question > 0) {
        
return url.substring(question+1, url.length);
    }
    
else {
        
var d = new Date();
        
var t = d.getTime();
        
return "timestamp="+t;
    }
}


function actionAjax(url) {
    
var urls = getActionName(url);
    
var pars = getActionPars(url);
    
var myAjax = new Ajax.Updater(_div1, urls, {
        method :'post',
        parameters :pars,
        onComplete :_action
    });
}

function _action(req) {
    
var varhtml = "<div id=\"_drag_div\" style=\""
            + _style2
            + 
"\" align=\"right\"><br/><a href=\"javascript:;\" onclick=\"this.parentNode.parentNode.style.display='none';this.parentNode.parentNode.innerHTML=null;\">[关闭]</a></div>"
            
+ req.responseText
            
+"<div id=\"_drag_div\" style=\""
            + _style2
            + 
"\" align=\"left\"><br/><a href=\"javascript:;\" onclick=\"this.parentNode.parentNode.style.display='none';this.parentNode.parentNode.innerHTML=null;\">[关闭]</a></div>"
            ;
    
//varhtml =  varhtml.replace(/form[ ]+action=["'](.*)["']/gi, "form action=\"javascript:actionAjax('$1');\" ")  ;
                              
    _div1.innerHTML 
= varhtml;
    
var drag = new Drag();
    
// drag.build(div1);//拖动本身
    drag.build(_div1, _div1.firstChild);// 通过一个对象拖动另一个对象
    //drag.build(_div1, _div1.lastChild);// 通过一个对象拖动另一个对象
}


function showByEvent(event, useDiv) {
    useDiv.style.display 
= "";
    useDiv.style.left 
= mouseX(event);
    useDiv.style.top 
= mouseY(event);
}


function mouseX(ev) {
    
if( ev == null )ev = event || window.event ;
    
if(ev.clientX){
        
return ev.clientX + document.body.scrollLeft - document.body.clientLeft;
    }
else if(ev.pageX){
        
return ev.pageX;
    }
}
function mouseY(ev) {
    
if( ev == null )ev = event || window.event ;
    
if(ev.clientY){
        
return ev.clientY + document.body.scrollTop - document.body.clientTop ;
    }
else if(ev.pageX){
        
return ev.pageY;
    }
}

function Drag() {
}
Drag.prototype.baseX 
= 0;
Drag.prototype.baseY 
= 0;
Drag.prototype.lastX 
= 0;
Drag.prototype.lastY 
= 0;
Drag.prototype.nowX 
= 0;
Drag.prototype.nowY 
= 0;
Drag.prototype.obD 
= null;
Drag.prototype.obM 
= null;
Drag.prototype.build 
= function(_obD, _obM) {
    
if (_obM) {
        Drag.prototype.obM 
= _obM;
    } 
else {
        Drag.prototype.obM 
= _obD;
    }
    Drag.prototype.obD 
= _obD;
    Drag.prototype.obM.onmousedown 
= function(event) {
        Drag.prototype.lastX 
= mouseX(event);
        Drag.prototype.lastY 
= mouseY(event);
        Drag.prototype.baseX 
= Drag.prototype.obD.style.left;
        Drag.prototype.baseY 
= Drag.prototype.obD.style.top;
        
this.onmousemove = function(event) {
            Drag.prototype.nowX 
= mouseX(event);
            Drag.prototype.nowY 
= mouseY(event);
            Drag.prototype.obD.style.left 
= (parseFloat(Drag.prototype.baseX)
                    
+ Drag.prototype.nowX - Drag.prototype.lastX)
                    
+ "px";
            Drag.prototype.obD.style.top 
= (parseFloat(Drag.prototype.baseY)
                    
+ Drag.prototype.nowY - Drag.prototype.lastY)
                    
+ "px";
        }
    }
    Drag.prototype.obM.onmouseup 
= function(event) {
        
// obD.onmouseup = null;
        Drag.prototype.obD.onmousemove = null;
        Drag.prototype.obM.onmousemove 
= null;
    }
    Drag.prototype.obM.onmouseout 
= function() {
        
// obM.onmouseup = null
        Drag.prototype.obM.onmousemove = null;
        Drag.prototype.obD.onmousemove 
= null;
    }
}


评论

# re: ajax javascript 弹出框   回复  更多评论   

2009-02-05 13:42 by zane
good

只有注册用户登录后才能发表评论。


网站导航: