1.如何在Browser建立可移動之子視窗, 有點類似Porlet
2.如何以Mouse移動Browser上的物件; 本範例示範的可移動物件, 可以是物件的組合, 例如: TABLE
本範例適用於IE, Firefox, Netscape
本範例僅示範建立一個靜態的子視窗, 如何進行動態建立多個子視窗, 將於後續文章進行探討
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script language="JavaScript">
var IE = window.Event ? false : true;
if ( !IE ) {
document.captureEvents(Event.MOUSEMOVE || Event.MOUSEUP || Event.MOUSEDOWN);
}
var moving = 'false';
var originalObjectX, originalObjectY;
var originalEventX, originalEventY;
var currentObject;
function showChildWindow() {
document.getElementById('porlet').style.visibility = "visible";
}
function hideChildWindow() {
document.getElementById('porlet').style.visibility = "hidden";
}
function dragObject(source) {
if ( moving == 'true' && currentObject && currentObject.id != '' ) {
if ( !IE ) {
if ( source.pageX ) {
document.getElementById(currentObject.id).style.left = parseInt(originalObjectX) + source.pageX - originalEventX;
document.getElementById(currentObject.id).style.top = parseInt(originalObjectY) + source.pageY - originalEventY;
}
} else {
document.getElementById(currentObject.id).style.left = parseInt(originalObjectX) + event.clientX - originalEventX;
document.getElementById(currentObject.id).style.top = parseInt(originalObjectY) + event.clientY - originalEventY;
}
return false;
}
}
function startMove(source) {
var hitTarget = false;
if ( IE ) {
if ( event.srcElement.id == 'target' ) {
moving = 'true';
currentObject = document.getElementById('porlet');
}
} else {
if ( source.originalTarget.id == 'target') {
moving = 'true';
currentObject = document.getElementById('porlet');
}
}
if ( moving == 'true' ) {
if ( IE ) {
originalObjectX = currentObject.style.left;
originalObjectY = currentObject.style.top;
originalEventX = event.clientX;
originalEventY = event.clientY;
} else {
originalObjectX = currentObject.style.left;
originalObjectY = currentObject.style.top;
originalEventX = source.pageX;
originalEventY = source.pageY;
}
document.onmousemove = dragObject;
}
}
function releaseDrag() {
moving = 'false';
}
document.onmousedown = startMove;
document.onmouseup = releaseDrag;
</script>
</head>
<body>
<a href="javascript:showChildWindow()"><font style="font-family:Verdana;font-size:12px;">開啟子視窗</font></a>
<br/>
<div id="porlet" style="font-family:Verdana;font-size:12px;position:absolute;width:300px;height:100px;left:50px;top:50px;">
<table cellspacing="0" cellpadding="0" width="100%" style="border-width:1px;border-style:solid;
border-color:#000000;background-color:#d3d3d3;padding:3px;">
<tr height="25px">
<td width="2%"><img src="wTag.jpg" border="0" width="20px"/></td>
<td id="target" width="96%" align="CENTER" onmousedown="startMove()" style="font-family:Verdana;font-size:12px;cursor:hand">
可移動子視窗
</td>
<td width="2%"><a href="javascript:hideChildWindow()"><img src="close.jpg" border="0" width="20px"/></a></td>
</tr>
<tr height="300px">
<td colspan="3" valign="TOP" style="background-color:#ffffff">
<table width="100%" height="100%" style="border-width:1px;border-style:solid;border-color:#000000;padding:3px;">
<tr>
<td valign="TOP" style="font-family:Verdana;font-size:12px;">
這是一個在Browser示範建立子視窗, 同時可以以Mouse進行移動
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script language="JavaScript">
document.getElementById('porlet').style.visibility = "hidden";
</script>
</body>
</html>
沒有留言:
張貼留言