Jquery DIV+javascript自适应大小窗口.
注:此代码正常运行还需要jquery.js,地址:http://code.jquery.com/latest-jquery.js
可根据加载到窗口里的目标页面大小自动调窗口大小,简要代码如下:
test.html源码:
test.html
<!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>
<title></title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="popwin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popshow').popshow_window('<div id="gedit"></div>');
$('#btn').click(function() {
win_show('test1.html');
});
$('#btn1').click(function() {
win_show('test2.html');
});
function win_show(url) {
$("#gedit").html('');
startDownload(url, function(s) {
$('#gedit').html(s);
});
openpopshow();
}
});
</script>
</head>
<body>
<div id="popshow" style="cursor: pointer">
</div>
<input type="button" id="btn" value="300x300" />
<input type="button" id="btn1" value="600x600" />
</body>
</html>
test1.html源码:
test1.html
<html>
<head>
<title></title>
</head>
<body>
<div style="width:50px;height:65px">
50x65
<input type="button" value="Close" onclick="close_window();" />
</div>
</body>
</html>
test2.html源码:
test2.html
<html>
<head>
<title></title>
</head>
<body>
<div style="width:50px;height:65px">
50x65
<input type="button" value="Close" onclick="close_window();" />
</div>
</body>
</html>
popwin.js
(function($) {
$.fn.jqDrag = function(h) { return i(this, h, 'd'); };
$.fn.jqResize = function(h) { return i(this, h, 'r'); };
$.jqDnR = { dnr: {}, e: 0,
drag: function(v) {
if (M.k == 'd') E.css({ left: M.X + v.pageX - M.pX, top: M.Y + v.pageY - M.pY });
else E.css({ width: Math.max(v.pageX - M.pX + M.W, 0), height: Math.max(v.pageY - M.pY + M.H, 0) });
return false;
},
stop: function() { $().unbind('mousemove', J.drag).unbind('mouseup', J.stop); }
};
var J = $.jqDnR, M = J.dnr, E = J.e,
i = function(e, h, k) {
return e.each(function() {
h = (h) ? $(h, e) : e;
h.bind('mousedown', { e: e, k: k }, function(v) {
var d = v.data, p = {}; E = d.e;
if (E.css('position') != 'relative') { try { E.position(p); } catch (e) { } }
M = { X: p.left || f('left') || 0, Y: p.top || f('top') || 0, W: f('width') || E[0].scrollWidth || 0, H: f('height') || E[0].scrollHeight || 0, pX: v.pageX, pY: v.pageY, k: d.k };
$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
return false;
});
});
},
f = function(k) { return parseInt(E.css(k)) || false; };
})(jQuery);
$.fn.popshow_window = function(html) {
var me = this;
$(me).html("<table width='150px' height=100% border=0 class=clsTitleBarBGColor cellpadding=0 cellspacing=0 bgcolor='#FFFFFF' style='border: 2 solid #000000'><tr><td valign=top height=20 ><table border=0 cellpadding=0 cellspacing=0 height=0 width=100%><tr><th height=18 style=cursor:move width=100% bgcolor='red'><div id=popshow_drag><font color='#FFFFFF'>自适应大小窗口</font></div></th><td bgcolor='#D7D7D7' height=25><div id='popshow_imgclose' style='cursor:pointer;background-color:Red;width:15px;height:25px'>X</div></td></tr></table><table cellpadding=0 cellspacing=0 border=0 width=100%><tr><td style='padding:1px' width='100%' height='100%' valign=top><div id=popshowcont>" + html + "</div></td></tr></table></td></tr><tr><td height=1><table border=0 cellpadding=0 cellspacing=0 width='100%'><tr><th height=1 width=100% > </th><td ><div id=popshow_resize style='cursor:se-resize; position: absolute;'></div></td></tr></table></td></tr></table>");
$(me).css("{visibility:hidden,position:absolute,left:0,top:0,width:480,height:200,z-index:10,background-color:000eee,border:1px solid #CCC}");
$(me).css("visibility", "hidden");
$(me).css("position", "absolute");
$(me).css("left", "0");
$(me).css("top", "0");
$(me).css("height", "10");
$(me).css("z-index", "7");
$(me).css("width", "10");
$(me).css("left", "0");
$(me).css("background-color", "#EEE");
$(me).css("border", "solid 1px #CCC");
$(me).find('#popshow_imgclose').click(function() {
$("#popshowcont").html('');
$(me).empty();
$(me).css("visibility", "hidden");
});
$(me).jqDrag('#popshow_drag').jqResize('#popshow_resize');
}
var xx = 0, yy = 0;
function mm() {
sx = window.document.body.scrollLeft;
sy = window.document.body.scrollTop;
//alert(sx + "-mm-" + sy);
xx = window.event.x + sx;
yy = window.event.y + sy;
//alert(xx + "-mm-" + yy);
};
function openpopshow() {
$("#popshow").popshow_window('<div id="gedit"></div>');
var ww = $(document).width();
var dw = $("#popshow").width();
xx = xx - dw / 2;
if (xx < 0) xx = 10;
if ((xx + dw) > ww) xx = ww - dw - 50;
//alert(xx+"--"+yy);
$("#popshow").css("left", 300);
$("#popshow").css("top", 200);
$("#popshow").css("visibility", "visible");
}
function close_window() {
document.all.popshow.style.visibility = "hidden";
document.all.gedit.innerHTML = '';
}
function startDownload(url, enddo) {
$.ajax({
type: "GET",
cache:false,
url: url,
dataType: "html",
success: function(ht) {
enddo(ht);
}
});
}
注:此代码正常运行还需要jquery.js,地址:http://code.jquery.com/latest-jquery.js
浙公网安备 33010602011771号