CSDN博客

img emu_ston

试试blog好不好用,发个两年前做的js表单设计器

发表于2004/6/25 16:57:00  1246人阅读

一共两个htm页面和两个js脚本文件。formCreate.htm是主页面。

 

formCreate.htm:

<HTML xmlns:move>
<head>
<title>修改表单</title>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<SCRIPT LANGUAGE="JavaScript" src="movable.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="xmlFunctions.js"></SCRIPT>
</head>
<body bgcolor="#EFEFDE">

<CENTER style="font-size:23">表单设计器——新建表单
</CENTER>
<BR>
<input type=text id=xmlResult size=50>
<BR>
<CENTER>
  <button onclick="addElement()"> 添加元素 </button> &nbsp;
  <button onclick="removeElement()" id="RemoveButton" disabled> 删除元素 </button> &nbsp;
  <button onclick="reclaimElement()" id="ReclaimButton" disabled> 回收元素 </button> &nbsp;
  <button onclick="document.location.reload()"> 重 置 </button> &nbsp;
  <button onclick="window.xmlResult.value=output(window.bound1)"> 生成xml </button> &nbsp;
  <button onclick="window.bound1.innerHTML='';initialize(window.xmlResult.value);D_NewMouseUp();"> 重 建 </button>
</CENTER>
<br><BR>
  表单模板名 :<input type=text size=12 value="新表单">&nbsp; &nbsp;
<div id="bound1" style="position: absolute;cursor: default; BACKGROUND-COLOR:ffffdd;" onclick=selectedNone()>
</div>


<SCRIPT LANGUAGE="JavaScript">
<!--
var srcXmlString = "<0><elementLabel>姓名:</elementLabel><elementName>Title</elementName><elementType>text</elementType><elementLeft>22</elementLeft><elementTop>15</elementTop><elementSize>15</elementSize><elementValue>asdfg</elementValue></0>"+

"<1><elementName>gender</elementName><elementLabel>男</elementLabel><elementType>radio</elementType><elementLeft>252</elementLeft><elementTop>15</elementTop><elementChecked>checked</elementChecked></1>"+

"<2><elementName>gender</elementName><elementLabel>女</elementLabel><elementType>radio</elementType><elementLeft>322</elementLeft><elementTop>15</elementTop></2>"+

"<3><elementName>department</elementName><elementLabel>部门:</elementLabel><elementType>select-one</elementType><elementLeft>22</elementLeft><elementTop>55</elementTop><elementSize>120</elementSize><elementContent><option value='dept1'>工程部</option><option value='dept2'>财务部</option><option value='dept3' selected>人事部</option><option value='dept4'>后勤部</option></elementContent></3>"+

"<4><elementName>notification</elementName><elementLabel>备注</elementLabel><elementType>textarea</elementType><elementLeft>22</elementLeft><elementTop>100</elementTop><elementValue>asdfsdfs/ndfgasdf</elementValue><rows>7</rows><cols>63</cols></4>"+

"<5><elementName>fullMember</elementName><elementLabel>正式员工</elementLabel><elementType>checkbox</elementType><elementLeft>252</elementLeft><elementTop>55</elementTop><elementValue>full</elementValue><elementChecked>checked</elementChecked></5>"

var bgRectangle=new rectangle(10,200,500,300);

window.bound1.style.left=bgRectangle.left;
window.bound1.style.top=bgRectangle.top;
window.bound1.style.width=bgRectangle.width;
window.bound1.style.height=bgRectangle.height;

initialize(srcXmlString);

function initialize(src)
 {
 var elmArray = xmlToArray(src);   //把xml串解析为数组,每个数组素表示一个表单元素

 for (var i=0;i<elmArray.length;i++)
  createElement(elmArray[i]);
 }

D_NewMouseUp();//自动调整bound 的大小


//-->
</SCRIPT>
</body>

</html>

 

modifyElmAttr.htm:

<html>
<head>
<title>表单元素属性修改</title>
</head>
<body bgcolor="#EFEFDE" style="font-size:13">
<CENTER style="font-size:20">
表单元素属性修改
</CENTER>
<BR>
<BR>
<BLOCKQUOTE>
<BR>
元素标题:
<input type=text id=elmLabel><BR><BR>
元素类别
<select id="elmType" onchange="showDiv(this.value)">
 <option value="text">单行文字框</option>
 <option value="textarea">多行文字区域</option>
 <option value="select-one">选择框</option>
 <option value="checkbox">多选框</option>
 <option value="radio">单选框</option>
</select>
<BR><BR>
<div style="display:none" id="elmText">
 文字框默认值:<input type=text id=textDefault></input><BR><BR>
 文字框大小:<input type=text id=textSize value=20></input>
</div>

<div style="display:none" id="elmTextarea">
 文字区域默认值:<BR><textarea id=textAreaDefault cols=50 rows=6></textarea><BR><BR>
 文字区域大小:<input type=text id=textAreaRows size=8 value=5>行 &nbsp; <input type=text id=textAreaCols size=8 value=50>列
</div>

<div style="display:none" id="elmCheck">
多选框元素名:
<input type=text id=checkboxName></input>
<BR>
<BR>
 多选框默认状态:<input type=checkbox id=checkboxChecked>选中</input>
<BR>
<BR>
 多选框值:<input type=text id=checkboxValue></input>
</div>

<div style="display:none" id="elmRadio">
 单选框元素名:
 <input type=text id=radioName></input>
 <BR>
 <BR>
 单选框默认状态:<input type=checkbox id=radioChecked>选中</input>
 <BR>
 <BR>
 单选框值:<input type=text id=radioValue></input>
</div>

<div style="display:none" id="elmSelect">
 选择框大小:<input type=text id=selectSize value=130><BR><BR>
 选择框允许值:<BR><textarea id=selectValues cols=50 rows=6></textarea>
</div>
</BLOCKQUOTE>
<CENTER>
 <button onclick="window.close()"> 取 消 </button> &nbsp; <button type=submit onclick="doChange()"> 完 成 </button>
</CENTER></body>

<SCRIPT LANGUAGE="JavaScript">
<!--
window.elmLabel.value=dialogArguments.children[0].innerText;
var tmpelm;
/*
for (var i=0;i<dialogArguments.children.length;i++)
 {
 tmpelm = dialogArguments.children[i];
 if (tmpelm.type=="text" || tmpelm.type=="select-one" || tmpelm.type=="textarea" || tmpelm.type=="checkbox" || tmpelm.type=="radio")
  break;
 }
*/
tmpelm = dialogArguments.children[1];
var tmptype=tmpelm.type;
window.elmType.value=tmptype;
showDiv(tmptype,true);
function showDiv(tmptype,isFirstTime)
 {
 window.elmText.style.display="none";
 window.elmSelect.style.display="none";
 window.elmTextarea.style.display="none";
 window.elmCheck.style.display="none";
 window.elmRadio.style.display="none";
 
 switch(tmptype)
  {
  case "text":
    window.elmText.style.display="";
    if (isFirstTime)
     {
     window.textDefault.value=tmpelm.value;
     window.textSize.value=tmpelm.size;
     }
    break;

   case "select-one":
    window.elmSelect.style.display="";
    if (isFirstTime)
     {
     window.selectSize.value=tmpelm.style.width;
     var tmpoptions = tmpelm.children;
     for (var i=0;i<tmpoptions.length;i++)
      selectValues.value +=tmpoptions[i].text+"/n";
     }
    break;
     
   case "textarea":
    window.elmTextarea.style.display="";
    if (isFirstTime)
     {
     window.textAreaDefault.value=tmpelm.value;
     window.textAreaRows.value=tmpelm.rows;
     window.textAreaCols.value=tmpelm.cols;
     }
    break;
     
   case "checkbox":
    window.elmCheck.style.display="";
    if (isFirstTime)
     {
     window.checkboxValue.value=tmpelm.value;
     window.checkboxChecked.checked=tmpelm.checked;
     window.checkboxName.value=tmpelm.name;
     }
    break;

   case "radio":
    window.elmRadio.style.display="";
    if (isFirstTime)
     {
     window.radioValue.value=tmpelm.value;
     window.radioChecked.checked=tmpelm.checked;
     window.radioName.value=tmpelm.name;
     }
    break;

   default:
    window.close();
    break;
  }
 }

function doChange()
 {
 switch(window.elmType.value)
  {
  case "text":
   var tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN><INPUT TYPE=TEXT  value=/""+window.textDefault.value+
   "/" size="+window.textSize.value+"></INPUT>";
   dialogArguments.innerHTML=tmpstr;
   break;

  case "select-one":
   tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN> <select style=/"width:"+window.selectSize.value+"/" disabled>";
    var tmpvalues = window.selectValues.value+unescape("%0D%0a");
    var tmpfrom = 0;
    for (var tmpto=tmpvalues.indexOf("/n",tmpfrom);tmpto>-1;tmpto=tmpvalues.indexOf("/n",tmpfrom))
     {
     var tmpsubstring = tmpvalues.substring(tmpfrom,tmpto-1);
     if (tmpsubstring.length>0)
      {
      tmpstr += "<option>"+tmpsubstring+"</option>";
      }
     tmpfrom=tmpto+1;
     }
   tmpstr +="</select>";
   dialogArguments.innerHTML=tmpstr;
   break;
     
  case "textarea":
   var tmpstr = "<DIV>"+window.elmLabel.value+"</DIV><textarea cols="+window.textAreaCols.value+" rows="+window.textAreaRows.value+">"+window.textAreaDefault.value+"</textarea>"
   dialogArguments.innerHTML=tmpstr;
   break;
     
  case "checkbox":
   var tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN><INPUT TYPE=checkbox value=/""+window.checkboxValue.value+
   "/" name= /"" + checkboxName.value+"/""+((window.checkboxChecked.checked)?" checked ":"")+"></INPUT>";
   dialogArguments.innerHTML=tmpstr;
   break;

  case "radio":
   var tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN><INPUT TYPE=radio value=/""+window.radioValue.value+
   "/" name= /"" + radioName.value+"/""+((window.radioChecked.checked)?" checked ":"")+"></INPUT>";
   dialogArguments.innerHTML=tmpstr;
   break;

  default:
   break;
  }
  window.close();

 }

//-->
</SCRIPT>
</html>

 

movable.js:


var Mouse_Obj="none";
 var pX
 var pY
 var ElmRecycle=new Array();
 document.onmousemove=D_NewMouseMove;
 document.onmouseup=D_NewMouseUp;

function moveObj(c_Obj)
 { Mouse_Obj=c_Obj;
  pX=parseInt(Mouse_Obj.style.left)-event.x;
  pY=parseInt(Mouse_Obj.style.top)-event.y; }

 function D_NewMouseMove()
  {
 if(Mouse_Obj!="none")
  {
  tmpx=pX+event.x;
  tmpy=pY+event.y;
  if (parseInt(tmpx+parseInt(Mouse_Obj.offsetWidth))<=parseInt(window.bound1.offsetWidth) && tmpx>=0)
   Mouse_Obj.style.left=tmpx;
  if (tmpy>=10)
   {
   if (parseInt(tmpy+parseInt(Mouse_Obj.offsetHeight))>parseInt(window.bound1.offsetHeight-10))
    window.bound1.style.height = tmpy+parseInt(Mouse_Obj.offsetHeight)+10;
   Mouse_Obj.style.top=tmpy;
   }
  event.returnValue=false;
  }
 }
 
 function D_NewMouseUp()
 {
 if(Mouse_Obj!="none")
  Mouse_Obj="none";

 var tmpdivs =window.bound1.children;
 var maxY = 120
 for (var i=0;i<tmpdivs.length; i++)
  {
  tmpdiv = tmpdivs[i];
  if (maxY < tmpdiv.offsetHeight+tmpdiv.offsetTop)
   maxY=tmpdiv.offsetHeight+tmpdiv.offsetTop;
  }
 window.bound1.style.height = maxY+10;

 }

function clearSelectedSign()
 {
 var tmpdivs = window.bound1.children;
 for (var i=0;i<tmpdivs.length;i++)
  {
  tmpdivs[i].isSelected = false;
  tmpdivs[i].style.background=window.bound1.style.background;
  }
  window.RemoveButton.disabled=true;
 }

function selected(tmpdiv)
 {
  clearSelectedSign()
  if (tmpdiv==null) return;
  tmpdiv.isSelected = true;
  tmpdiv.style.background="#CCFFFF";
  window.RemoveButton.disabled=false;
 }
function selectedNone()
 {
 if (event.srcElement == window.bound1)
  clearSelectedSign()
 }

function removeElement()
 {
 var tmpdivs = window.bound1.children;
 for (var i=0;i<tmpdivs.length;i++)
  if (tmpdivs[i].isSelected)
   {
//   ElmRecycle.push( window.bound1.removeChild(tmpdivs[i]));
   ElmRecycle[ElmRecycle.length]=window.bound1.removeChild(tmpdivs[i]);
   window.ReclaimButton.disabled=false;
   }
 selected(window.bound1.children[window.bound1.children.length-1]);
 D_NewMouseUp();
 }

function reclaimElement()
 {
// window.bound1.appendChild(ElmRecycle.pop());
 window.bound1.appendChild(ElmRecycle[ElmRecycle.length-1]);ElmRecycle.length--;
 if (window.bound1.children.length > 0)
 selected(window.bound1.children[window.bound1.children.length-1]);
 window.ReclaimButton.disabled=(ElmRecycle.length==0);
 D_NewMouseUp();
 }

 

function addElement()
 {
 window.bound1.innerHTML +=  "<div style='position:absolute; cursor: hand; left:0; top:0; display:block; z-index:1' onclick='selected(this)' onMouseDown=moveObj(this) ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" ><span>新元素</span><input type=text  style=‘cursor: hand’></div>";
 selected(window.bound1.children[window.bound1.children.length-1]);
 D_NewMouseUp();
 }
 
function rectangle(left,top,width,height)
 {
 this.left=left;
 this.top=top;
 this.width=width;
 this.height=height;
 this.right=left+width;
 this.bottom=top+height;
 }

function createElement(xmlString)
 {
  var label =searchXMLstring(xmlString,"elementLabel");
 var name=searchXMLstring(xmlString,"elementName");
 var type=searchXMLstring(xmlString,"elementType");
 var left =searchXMLstring(xmlString,"elementLeft");
 var top =searchXMLstring(xmlString,"elementTop");
 var value =searchXMLstring(xmlString,"elementValue");
 if (value==null) value="";
 if (type=="text")
  {
  var size =searchXMLstring(xmlString,"elementSize");
  if (value==null) value="";
  if (size==null) size="20";
  window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:"+left+"; top:"+top+
   "; display:block; z-index:1' onclick='selected(this)' onMouseDown=moveObj(this) "+
   "ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" >"+
    "<span>"+label+"</span><input type=text name='"+name+"' style=‘cursor: hand’ size="+size+" value='"+value+"'></div>";
  }
 else if (type=="radio")
  {
  if (value==null) value=name;
  var checked =searchXMLstring(xmlString,"elementChecked");
  if (checked !="checked") checked="";

  window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:"+left+"; top:"+top+
   "; display:block; z-index:1' onclick='selected(this)' onMouseDown=moveObj(this) "+
   "ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" >"+
    "<SPAN name=elmLabel>"+label+"</SPAN><INPUT TYPE=radio value=/""+value+
   "/" name= /"" + name+"/"" +checked+ "></INPUT></div>";
  }
 else if (type=="checkbox")
  {
  if (value==null) value=name;
  var checked =searchXMLstring(xmlString,"elementChecked");
  if (checked !="checked") checked="";

  window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:"+left+"; top:"+top+
   "; display:block; z-index:1' onclick='selected(this)' onMouseDown=moveObj(this) "+
   "ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" >"+
    "<SPAN name=elmLabel>"+label+"</SPAN><INPUT TYPE=checkbox value=/""+value+
   "/" name= /"" + name+"/"" +checked+ "></INPUT></div>";
  }
 else if (type=="select-one")
  {
  var content =searchXMLstring(xmlString,"elementContent");
  var size =searchXMLstring(xmlString,"elementSize");
  window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:"+left+"; top:"+top+
   "; display:block; z-index:1' onclick='selected(this)' onMouseDown=moveObj(this) "+
   "ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" >"+
    "<SPAN name=elmLabel>"+label+"</SPAN><select style=/"width:"+size+"/" name=/""+name+"/" disabled>"+
   content+"</select></div>";
  }
 else if (type=="textarea")
  {
  var rows =searchXMLstring(xmlString,"rows");
  var cols =searchXMLstring(xmlString,"cols");
  window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:"+left+"; top:"+top+
   "; display:block; z-index:1' onclick='selected(this)' onMouseDown=moveObj(this) "+
   "ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" >"+
   "<DIV name=elmLabel>"+label+"</DIV><textarea cols="+cols+
   " rows="+rows+">"+value+"</textarea></div>";
  }
 else
 
  alert("无法识别元素类型:"+type);
 }
function output(tmpbound)
{
//遍历bound1的所有子元素,生成一个表示表单的xml串
var elmArray=tmpbound.children;
var result ="";
for (var i=0;i<elmArray.length;i++)
 {
 var tmpDiv = elmArray[i];
 var tmpElm = tmpDiv.children[1];
 var type=tmpElm.type;
 result +="/n<"+i+">";
 result +="<elementLabel>"+elmArray[i].children[0].innerText+"</elementLabel>";
 result +="<elementName>"+tmpElm.name+"</elementName>";
 result +="<elementType>"+type+"</elementType>";
 result +="<elementLeft>"+parseInt(tmpDiv.style.left)+"</elementLeft>";
 result +="<elementTop>"+parseInt(tmpDiv.style.top)+"</elementTop>";
 result +="<elementValue>"+tmpElm.value+"</elementValue>";
 if (type == "text")
  result +="<elementSize>"+tmpElm.size+"</elementSize>";
 else if (type=="checkbox" || type=="radio")
  result +="<elementChecked>"+((tmpElm.checked)?"checked":"")+"</elementChecked>";
 else if (type=="select-one")
  {
  result +="<elementSize>"+parseInt(tmpElm.style.width)+"</elementSize>";
  result +="<elementContent>";
  var tmpoptions = tmpElm.options;
  for (var j=0;j<tmpoptions.length;j++)
   result += "<option value="+tmpoptions[j].value+((tmpoptions[j].selected)?" selected":"")+">"+tmpoptions[j].text+"</option>";
  result +="</elementContent>";
  }
 else if (type == "textarea")
  result +="<rows>"+tmpElm.rows+"</rows>"+"<cols>"+tmpElm.cols+"</cols>";
 else
  alert ("无法识别的类型:"+type);
 result +="</"+i+">/n";
 }
return result;
}

xmlFunctions.js:

function searchXMLstring(src,searchfor)
 {
 var start="<"+searchfor+">";
 var end="</"+searchfor+">";
 var a=src.indexOf(start);
 var b=src.indexOf(end);
 if (a<0 || b<0) return null;
 a+=start.length;
 return src.substring(a,b); 
 }

function xmlToArray(src)
 {
 var i=0;
 var result = new Array();
 while (searchXMLstring(src,i) != null)
  {
//  result.push(searchXMLstring(src,i));
  result[result.length]=searchXMLstring(src,i);
  i++;
  }
 return result;
 }

 

 

0 0

相关博文

我的热门文章

img
取 消
img