?? main.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<meta name="description" content="Page Design">
<meta name="keywords" content="">
<meta name="author" content="SadEmperor">
<meta name="generator" content="SNC">
<style type="text/css">
td{
font-size:10pt;
color:#000000;
}
div{
font-size:10pt;
}
.text60{
width: 60px;
border: 1px solid #800000;
}
.text30{
width: 30px;
border: 1px solid #800000;
}
.usualDiv{
position:absolute;
border:1px dotted #333333;
background-color:#eeeeee;
z-index:2;
}
.focusOn{
position:absolute;
border:2px solid #000000;
background-color:#ffffe0;
z-index:2;
}
.cs{
display:none;
position:absolute;
z-index:98;
}
.button40{
border: 1px solid #000080;
color:#000000;
width:40px;
height:20px
}
.del{
border: 1px solid #8b0000;
color: #ffffff;
width:70px;
height:20px;
background-color:#B22222;
}
</style>
<script language="javascript">
//全局變量定義
var oTool;
var drawing=false;
var ix;
var ipointerX;
var step;
var styBorder,styBg;
var oo;
var px,py;
var status;
//顯示工具箱
function document::ondblclick()
{
fShowToolbox();
}
function fShowToolbox()
{
if(status=="ready"){
step=15;
ipointerX=event.x;
oTool.style.top=event.y;
oTool.style.display="block";
if(parseInt(ipointerX)+parseInt(oTool.style.width)>screen.availWidth)
ipointerX=parseInt(ipointerX)-parseInt(oTool.style.width);
fMoveToolbox();
}
return;
}
//移動工具箱到鼠標指針位置
function fMoveToolbox()
{
var iPosdiff=ix-ipointerX;
if(Math.abs (iPosdiff)<30) step=1;
if(iPosdiff<0){
oTool.style.left = parseInt(oTool.style.left) + step;
ix=parseInt(oTool.style.left);
sys_status.innerHTML=ix+"|"+ipointerX;
setTimeout("fMoveToolbox()",1)
}
else{
if(iPosdiff>0){
oTool.style.left=parseInt(oTool.style.left)-step;
ix=parseInt(oTool.style.left)
sys_status.innerHTML =ix+"|"+ipointerX;
setTimeout("fMoveToolbox()",1);
}
}
}
//在指定位置顯示必要的調試信息（與系統功能無關）
function debug(msg)
{
sys_status.innerHTML =msg;
}
//向層列表中加入項目
function fAddOption(listid,obj)
{
var oList=document.getElementById(listid);
if(oList){
var oNewOption=document.createElement("option");
oNewOption.text=obj.id;
//oNewOption.value=obj.id;
oList.add(oNewOption);
}
}
//在浮動工具欄中顯示當前層的信息
function fShowAttrib(sText)
{
var oDiv=document.getElementById(sText);
if(oDiv){
with(oDiv.style){
document.all.sys_currentDivTop.value=parseInt(top);
document.all.sys_currentDivLeft.value=parseInt(left);
document.all.sys_currentDivHeight.value=parseInt(height);
document.all.sys_currentDivWidth.value=parseInt(width);
}
document.all.sys_currentDivId.value=oDiv.id;
if(oo.id!=oDiv.id) oDiv.focus();
}
}
//根據輸入框的值改變層的屬性
function fApplyDivAdjust(iValue,sType)
{
if(event.type=="keypress"){
if(event.keyCode!=13) return;
}
if(!iValue) return;
if(!isNaN(iValue)&&oo){
switch(sType){
case "top":
oo.style.top=iValue;
break;
case "left":
oo.style.left=iValue;
break;
case "height":
oo.style.height=iValue;
break;
case "width":
oo.style.width=iValue;
break;
}
fShowEditTool(oo);
}
else{
event.srcElement.focus();
}
}
//檢查制定值是否是數字
function fCheck(iValue)
{
if(isNaN(iValue)) alert("輸入值必須是數字!");
else
return;
}
//用方向鍵按步長移動當前層
function document::onkeydown()
{
if(!oo) return
switch(event.keyCode){
case 38:
fMoveStep("up");
break;
case 40:
fMoveStep("down");
break
case 37:
fMoveStep("left");
break;
case 39:
fMoveStep("right");
break;
}
}
//按步長移動當前層
function fMoveStep(sDirect)
{
if(!oo) return;
var step=document.all.sys_movestep.value;
with(oo.style){
switch(sDirect){
case "up":
top=parseInt(top)-parseInt(step);
break;
case "down":
top=parseInt(top)+parseInt(step);
break;
case "left":
left=parseInt(left)-parseInt(step);
break;
case "right":
left=parseInt(left)+parseInt(step);
break;
}
}
fShowEditTool(oo);
}
//刪除當前層
function fDelDiv()
{
if(!oo) return;
if(confirm("確定要刪除該層嗎?這將導致層內所有元素丟失!")){
var syscs=document.all.tags("img");
var i;
for(i=0;i<syscs.length;i++){
if(syscs[i].id.substring(0,3)=="sys") syscs[i].style.display="none";
}
for(i=0;i<sys_divlist.length;i++){
if(sys_divlist.options[i].text==oo.id)
sys_divlist.options[i]=null;
}
document.body.removeChild(oo);
oo=null;
}
}
//系統功能函數
function window::onload()
{
//private variable
var el=document.body;
var divid;
var oldx=0,oldy=0;
//Initialize
ix=0;
ipointerX=0;
status="ready";
styBorder="1px dotted #333333";
styBg="#eeeeee";
oTool=document.getElementById("sys_toolbox");
el.attachEvent("onmousedown",function(){
if(event.ctrlKey){
drawing=true;
oo=createDiv();
fAddOption("sys_divlist",oo);
oldx=event.x+el.scrollLeft;
oldy=event.y+el.scrollTop;
//el.setCapture();
}
});
el.attachEvent("onmouseup",function(){
if(drawing&&event.ctrlKey){
//el.releaseCapture();
drawing=false;
oo.focus();
align(oo);
}
if(status!="ready"){
if(status=="moving") align(oo);
status="ready";
fShowEditTool(oo);
}
});
el.attachEvent("onmousemove",function(){
//if (!drawing) return;
if(drawing&&event.ctrlKey){
with(oo.style){
left=(oldx>event.x+el.scrollLeft)?event.x+el.scrollLeft:oldx;
top=(oldy>event.y+el.scrollTop)?event.y+el.scrollTop:oldy;
width=Math.abs(el.scrollLeft+event.x-oldx)
height=Math.abs(el.scrollTop+event.y-oldy)
display="block";
}
}
if(status=="moving"){
oo.style.left=px+event.x;
oo.style.top=py+event.y;
fShowEditTool(oo);
fChgTextValue("sys_currentDivTop",parseInt(oo.style.top));
fChgTextValue("sys_currentDivLeft",parseInt(oo.style.left));
}
if(status=="resizingRight"){
debug(status);
with(oo.style){
width=Math.abs(event.x-oo.offsetLeft);
fShowEditTool(oo);
fChgTextValue("sys_currentDivWidth",parseInt(width));
}
}
if(status=="resizingDown"){
debug(status);
with(oo.style){
height=Math.abs(event.y-oo.offsetTop);
fShowEditTool(oo);
fChgTextValue("sys_currentDivHeight",parseInt(height));
}
}
});
}
//創建新層
function createDiv()
{
var thisid="user_"+String(parseInt(Math.random ()*1000));
var oNewdiv=document.createElement ("div");
with(oNewdiv){
id=thisid;
className="usualDiv";
style.display="none";
contentEditable="false";
//add object event here
attachEvent("onfocus",focusOn);
}
document.body.appendChild(oNewdiv);
return oNewdiv;
}
//層被選中后的動作
function focusOn()
{
var aDivs=document.all.tags ("div");
var i
if(document.all.sys_islock.checked) return;
oo=event.srcElement;
for(i=0;i<aDivs.length;i++){
if(aDivs[i].id.substring(0,4)=="user"){
if( aDivs[i].id==oo.id) aDivs[i].className="focusOn";
else
aDivs[i].className="usualDiv";
}
}
fShowEditTool(oo);
fShowToolbox();
fShowAttrib(oo.id);
}
//改變系統工作狀態
function fChgStatus(obj)
{
if(drawing==false) drawing=true;
else
drawing=false;
obj.value=drawing;
}
//層對齊
function align(obj)
{
var precision=10;
if(!obj) return;
with(obj.style){
left=(parseInt(parseInt(left)/precision)*precision).toString();
top=(parseInt(parseInt(top)/precision)*precision).toString();
height=(parseInt(parseInt(height)/precision)*precision).toString();
width=(parseInt(parseInt(width)/precision)*precision).toString();
}
}
//改變指定輸入框的值
function fChgTextValue(sId,iValue)
{
var oText=document.getElementById(sId);
if(oText.type=="text"){
oText.value=iValue;
}
}
//顯示改變層大小的四個按鈕
function fShowEditTool(obj)
{
if(!obj) return;
/*
with(document.all.sys_csleft.style){
top=(((parseInt(obj.style.height)/2))+parseInt(obj.style.top)-5).toString();
left=(parseInt(obj.style.left)-5).toString();
display="block";
}
*/
with(document.all.sys_csright.style){
top=(((parseInt(obj.style.height)/2))+parseInt(obj.style.top)-5).toString();
left=(parseInt(obj.style.left)+parseInt(obj.style.width)-5).toString();
display="block";
}
/*
with(document.all.sys_csup.style){
top=(parseInt(obj.style.top)-5).toString();
left=(parseInt(obj.style.left)+parseInt(parseInt(obj.style.width)/2)-5).toString();
display="block";
}
*/
with(document.all.sys_csdown.style){
top=(parseInt(obj.style.top)+parseInt(obj.style.height)-5).toString();
left=(parseInt(obj.style.left)+parseInt(parseInt(obj.style.width)/2)-5).toString();
display="block";
}
with(document.all.sys_moving.style){
top=(parseInt(obj.style.top)-5).toString();
left=(parseInt(obj.style.left)-5).toString();
display="block";
}
}
//改變鼠標指針外觀
function fChgCursor(obj,type)
{
if(!obj) return;
obj.style.cursor=type;
}
//改變層大小
function fChgSize(direction)
{
if(!oo) return ;
switch(direction){
case "right":
status="resizingRight";
break;
case "down":
status="resizingDown";
break;
}
}
//移動層
function fMove()
{
status="moving";
px=parseInt(oo.style.top)-event.y;
py=parseInt(oo.style.left)-event.x;
//document.all.sys_moving.setCapture();
}
//鎖定層
function fLockDiv(obj)
{
if(obj.type!="checkbox") return;
if(oo){
(obj.checked)?document.all.sys_divlist.disabled=true:document.all.sys_divlist.disabled=false
}
}
//定義當前層是否可編輯
function fisEditable(obj)
{
if(oo){
(obj.checked)?oo.contentEditable=true:oo.contentEditable=false
}
}
</script>
</head>
<body onSelectstart="return false;" onDragstart="return false;" name="wholebody">
<!-- System Toolbox-->
<table id=sys_toolbox border="0" cellpadding="0" cellspacing="0" bgcolor="#990000" style="display:none;position:absolute;left:0;top:0;width:400;height:120;z-index:99">
<tr>
<td><table height="100%" width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td bgcolor="#8B0000"><font color="ffffff">系統工具</font></td>
</tr>
<tr>
<td bgcolor="#f5fffa">
<table width="100%" border="0" cellspacing="1" cellpadding="0" id=sys_divedit>
<tr>
<td>當前層 <input type="text" id=sys_currentDivId class="text60">
層列表 <select id=sys_divlist onchange="fShowAttrib(this.options[this.selectedIndex].text)" style="width:80px">
<option value="">請選擇</option>
</select>
</td>
</tr>
<tr>
<td>頂端:<input type="text" id="sys_currentDivTop" class="text30" onkeypress="fApplyDivAdjust(this.value,'top')" onblur="fApplyDivAdjust(this.value,'top')"> px
左端:<input type="text" id="sys_currentDivLeft" class="text30" onkeypress="fApplyDivAdjust(this.value,'left')" onblur="fApplyDivAdjust(this.value,'left')"> px
高:<input type="text" id="sys_currentDivHeight" class="text30" onkeypress="fApplyDivAdjust(this.value,'height')" onblur="fApplyDivAdjust(this.value,'height')"> px
寬:<input type="text" id="sys_currentDivWidth" class="text30" onkeypress="fApplyDivAdjust(this.value,'width')" onblur="fApplyDivAdjust(this.value,'width')"> px
</td>
</tr>
<tr>
<td>移動單位 <input type="text" id="sys_movestep" class="text30" onblur="fCheck(this.value)" value=1>px
<input type="button" id=sys_moveUp onclick="fMoveStep('up')" value="上" class="button40">
<input type="button" id=sys_moveDown onclick="fMoveStep('down')" value="下" class="button40">
<input type="button" id=sys_moveLeft onclick="fMoveStep('left')" value="左" class="button40">
<input type="button" id=sys_moveRight onclick="fMoveStep('right')" value="右" class="button40">
<input type="button" id=sys_delDiv onclick="fDelDiv()" value="刪除該層" class="del">
</td>
</tr>
<tr>
<td>鎖定該層 <input type="checkbox" id=sys_islock onclick="fLockDiv(this)">
編輯 <input type="checkbox" id=sys_isEditable onclick="fisEditable(this)">
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="ffffff">
<td>隱藏工具欄 隱藏所有系統內容
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" id=sys_status></td>
</tr>
</table></td>
</tr>
</table>
<!-- Change DIV size , cs=ChangeSize -->
<img id=sys_csleft class="cs" src="images/cs.gif" onmouseover="fChgCursor(this,'e-resize')" onclick="fChgSize(this,'left')">
<img id=sys_csright class="cs" src="images/cs.gif" onmouseover="fChgCursor(this,'w-resize')" onmousedown="fChgSize('right')">
<img id=sys_csup class="cs" src="images/cs.gif" onmouseover="fChgCursor(this,'s-resize')" onclick="fChgSize('up')">
<img id=sys_csdown class="cs" src="images/cs.gif" onmouseover="fChgCursor(this,'n-resize')" onmousedown="fChgSize('down')">
<img id=sys_moving class="cs" src="images/cs.gif" onmouseover="fChgCursor(this,'move')" onmousedown="fMove()">
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -