📄 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">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script language="javascript">
//全局变量定义
var oTool;
var drawing=false;
var ix;
var ipointerX;
var step;
var styBorder,styBg;
var oo;
var px,py;
var status;
var sToolStatus;
var cWidth,cHeight;
//显示工具箱
function document::ondblclick()
{
fShowToolbox();
}
function fShowToolbox()
{
if(status=="ready"){
clearTimeout();
step=15;
ipointerX=event.x;
if(parseInt(event.y)+parseInt(oTool.style.height)<cHeight)
oTool.style.top=event.y;
else
oTool.style.top=cHeight-parseInt(oTool.style.height)-40;
oTool.style.display="block";
oTool.filters.alpha.opacity=100;
if(parseInt(ipointerX)+parseInt(oTool.style.width)>cWidth)
ipointerX=parseInt(ipointerX)-parseInt(oTool.style.width);
fMoveToolbox();
if(!oo) fEmptyInput();
}
return;
}
//移动工具箱到鼠标指针位置
function fMoveToolbox()
{
var iPosdiff=ix-ipointerX;
if(Math.abs (iPosdiff)<30) step=1;
else
step=15;
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 fEmptyInput()
{
if(oo) return;
var arr=document.all.tags ("input");
var i;
for(i=0;i<arr.length;i++){
if(arr[i].id.substring(0,14)=="sys_currentDiv")
arr[i].value="";
}
}
//在指定位置显示必要的调试信息（与系统功能无关）
function debug(msg)
{
sys_status.innerText =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(oDiv.contentEditable==true) sys_isEditable.checked =true
else
sys_isEditable.checked =false;
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);
}
}
//检查制定值是否是数字
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;
case 46:
if(oo.contentEditable!="true")
fDelDiv();
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,6)=="sys_cs") 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;
//System Initialize
window.name ="efos_PD_main"
ix=0;
ipointerX=0;
status="ready";
styBorder="1px dotted #333333";
styBg="#eeeeee";
oTool=document.getElementById("sys_toolbox");
sToolStatus="normal";
cWidth=parseInt(document.body .clientWidth);
cHeight=parseInt(document.body .clientHeight);
el.attachEvent("onmousedown",function(){
if(event.shiftKey&&status!="preview"){
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.shiftKey){
//el.releaseCapture();
drawing=false;
oo.focus();
align(oo);
}
if(status!="ready"&&status!="preview"){
if(status=="moving"&&oo.id.substring(0,4)=="user") align(oo);
status="ready";
fShowEditTool(oo);
}
});
el.attachEvent("onmousemove",function(){
//if (!drawing) return;
if(drawing&&event.shiftKey){
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";
}
}
switch(status){
case "moving":
fDragObject(oo);
break;
case "preview":
sys_endpreview.style .left=event.x-30;
sys_endpreview.style .top =event.y-10;
break;
case "resizingRight":
with(oo.style){
width=Math.abs(event.x-oo.offsetLeft);
fShowEditTool(oo);
fChgTextValue("sys_currentDivWidth",parseInt(width));
}
break;
case "resizingDown":
with(oo.style){
height=Math.abs(event.y-oo.offsetTop);
fShowEditTool(oo);
fChgTextValue("sys_currentDivHeight",parseInt(height));
}
break;
case "moveToolBox":
oTool.style.left=px+event.x;
oTool.style.top=py+event.y;
break;
default:
return false;
}
});
}
//移动浮动工具栏
function fMoveToolBox()
{
px=parseInt(oTool.style.top)-event.y;
py=parseInt(oTool.style.left)-event.x;
status="moveToolBox";
return;
}
//拖动对象
function fDragObject(obj )
{
obj.style.left=px+event.x;
obj.style.top=py+event.y;
fShowEditTool(obj);
fChgTextValue("sys_currentDivTop",parseInt(obj.style.top));
fChgTextValue("sys_currentDivLeft",parseInt(obj.style.left));
}
//创建新层
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);
//attachEvent("onresize",fShowAttrib(thisid));//Error: Type dismath ! why??
}
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);
if(sToolStatus=="normal") 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 fHideEditTool()
{
sys_csright.style.display ="none";
sys_csdown.style.display ="none";
sys_csmoving.style.display ="none";
}
//显示层控制按钮
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_csmoving.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()
{
if(!oo) return;
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
}
}
//定义当前层是否可编辑
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -