Posted on 2008-09-15 01:02
G_G 阅读(427)
评论(0) 编辑 收藏 所属分类:
javascript
直接 运行 div_show_drag.rar
http://www.blogjava.net/Files/Good-Game/div_Show_drag.rarhtml test
<html>
<head>
<script type="text/javascript" src="showDivUtil.js"></script>
</head>
<body>
<input type="button" id="_in" value="google-baidu" onclick="test();"/>
<div id='_div' />
<script language="javascript">
/*api说明
ShowDiv（ 源element , 是否使用现有 div )
源element,是否使用现有 div 都可为null ;
*/
var ediv = new ShowDiv('_in',null);
function test(){
if( ! ediv.isShow ){
// tdiv［X,Y,H,W］准备展现div set->tdiv.X = .. ,
// tsubEle［X,Y,H,W］
// 源ele大小位置 ,tscreen［screenH,screenW］屏幕长宽
ediv.setLocation = function(tdiv,tsubEle,tscreen){
/* 居中展现
tdiv.W =200 ;
tdiv.H = 300 ;
tdiv.X = tscreen.screenW/2-tdiv.W/2 ;
tdiv.Y = tscreen.screenH/2-tdiv.H/2 ;
*/
/* 根据 tsubEle 位置 左显示
tdiv.X = tsubEle.X+tsubEle.W ;
tdiv.Y = tsubEle.Y ;
*/
/* 根据 tsubEle 大小 左长条 显示
tdiv.X = tsubEle.X+tsubEle.W ;
tdiv.Y = tsubEle.Y ;
*/
/* 根据 tsubEle 大小 下长条 显示
tdiv.X = tsubEle.X+tsubEle.W ;
tdiv.Y = tsubEle.Y ;
tdiv.H = 200 ;
tdiv.W = tsubEle.W ;
*/
/* 
.. 等等 自己尝试吧*/
tdiv.innerHTML = "<li>google</li><li>baidu</li>" ;
//可以参考
Drag.init(tdiv);
}
ediv.setStyle('background-color:#F4F4F4;');
ediv.show();
}else{
ediv.close();
//ediv.delete();
}
}
</script>
</body>
</html>
showDivUtil.js
/*
* Skynet
* 2008-9-15 00:56
* liukaiyi@gmail.com
*/
function ShowDiv(subEle,ediv){
//public
this.style ;
this.isShow = false ;
//private
this._div ;
this._subEle ;
this._subEle ;
if( typeof ediv == "undefined" || ediv == null)
this._div=document.createElement("div");
else if( typeof ediv == "string")
this._div=document.getElementById(ediv);
else if( /object/.test(typeof ediv) )
this._div= ediv ;
if( typeof subEle == "string")
this._subEle=document.getElementById(subEle);
else if( /object/.test(typeof subEle) )
this._subEle= subEle ;
}
//外置方法 x , y ,w , h , div
ShowDiv.prototype.setLocation = new Function() ;
//设置 div 样式
ShowDiv.prototype.setStyle=function(styleStrOrObj){
this.style=this._div.style ;
if( typeof styleStrOrObj == "string"){
var strs = styleStrOrObj.split(/;/) ;
for(var i=0;i<strs.length;i++){
var key = strs[i].split(/:/)[0];
var value = strs[i].split(/:/)[1];
var _s = key.indexOf("-") ;
if( _s>0)
key=key.substring(0,_s)+key.substring(_s+1,_s+2).toLocaleUpperCase()+key.substring(_s+2,key.length);
if( key!=null&&key!=''&&key!=' ' ){
eval( 'this._div.style.'+key+'="'+value+'"' );
}
}
}else if( /object/.test(typeof styleStrOrObj) ) {
this._div.style = styleStrOrObj ;
}
if(this._div.style.position==null || this._div.style.position=="")
this._div.style.position="absolute";
}
ShowDiv.prototype.show=function(){
if( typeof this._subEle != "undefined" || this._subEle != null){
this._subEle.Y = getElementPos(this._subEle).y;
this._subEle.X = getElementPos(this._subEle).x ;
this._subEle.W = this._subEle.offsetWidth ;
this._subEle.H = this._subEle.offsetHeight ;
}
//this._div.Y = sset
//this._div.X = sset
this._div.W = parseInt( this._div.style.width );
this._div.H = parseInt( this._div.style.height );
this.setLocation(this._div,this._subEle,{screenW:document.body.clientWidth,screenH:document.body.clientHeight});
this._div.style.left = this._div.X ;
this._div.style.top = this._div.Y ;
if( this._div.W && this._div.H ){
this._div.style.width = this._div.W ;
this._div.style.height = this._div.H ;
}
document.body.appendChild(this._div);
this.isShow = true ;
}
ShowDiv.prototype.close=function(){
document.body.removeChild(this._div);
this.isShow = false ;
}
ShowDiv.prototype.delete=function(){
document.body.removeChild(this._div);
this._div = null ;
this.isShow = false ;
}
//得到 Element 位置
// 说明：用 Javascript 获取指定页面元素的位置
// 整理：http://www.codebit.cn
// 来源：YUI DOM
function getElementPos(el) {
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
if(el.parentNode === null || el.style.display == 'none'){
return false;
}
var parent = null;
var pos = [];
var box;
if(el.getBoundingClientRect){
// IE
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop};
}else if(document.getBoxObjectFor){
// gecko
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];
}else {
// safari & opera
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
if (ua.indexOf('opera') != -1|| ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}
}
if (el.parentNode) { parent = el.parentNode; }
else { parent = null; }
// account for any scrolled ancestors
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML'){
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) { parent = parent.parentNode; }
else { parent = null; }
}
return {x:pos[0], y:pos[1]};
}