js 表单格局设计器-JavaSript-爱易网页

js 表单格局设计器

日期：2014-05-16　浏览次数：20641 次

js 表单布局设计器


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>表单布局设计器 !</title> 
<link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
<script type="text/javascript" src="js/dragform.js"></script>


<style>
   
	#formLable { float: left; width: 100px; min-height: 12em; margin-top:10px;margin-left:20px;} 
	* html #formLable { height: 12em; } /* IE6 */
	.formLable.custom-state-active { background: #eee; }
	.formLable li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	.formLable li h5 { margin: 0 0 0.4em; cursor: move; }

	.tdbg {background:#CCFFFF}
	.notnull{color:#FF0000;}
</style>
	
	

</head>
<body>
   <center><h2>表单布局设计器</h2></center>
   <hr/> <br/>
   
   <div id="demo">
  <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" >
   <tr>
       <td width="15%" align="center" style="border:1px solid #666666" height="35"> 标签</td>
	   <td style="border:1px solid #666666">
	      <input type="button" onclick="insertCol();" value="插入行" />
		  <input type="button" onclick="deleteCol();" value="删除行" />
		  <input type="button" onclick="insertCell();" value="插入列" />
	      <input type="button" onclick="deleteCell();" value="删除列" />
		  <input type="button" onclick="combinCol();" value="合并" />
		  <!--<input type="button" onclick="" value="拆分" disabled />-->
		  <input type="button" onclick="alignOpr('left');" value="左对齐" />
		  <input type="button" onclick="alignOpr('center');" value="左右对齐" />
		  <input type="button" onclick="alignOpr('right');" value="右对齐" />
		  <input type="button" onclick="valignOpr('top');" value="上对齐" />
		  <input type="button" onclick="valignOpr('middle');" value="上下居中" />
		  <input type="button" onclick="valignOpr('bottom');" value="下对齐" />
		  <input type="button" onclick="nullOpr(1);" value="设为必填" />
		  <input type="button" onclick="nullOpr(2)" value="取消必填设置" />
				
		 
	   </td>
   </tr>
   <tr>
     
	 <td  rowspan=2 style="border:1px solid #666666" valign="top" >
	  
	  <ul id="formLable" class="formLable ui-helper-reset ui-helper-clearfix">
			<li class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">姓名&nbsp;</h5>
			
			</li>
			<li class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">年龄&nbsp;</h5>
				
			</li>
			<li class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">家庭住址&nbsp;</h5>
			</li>
			<li class="ui-widget-content ui-corner-tr">
				<h5 class="ui-widget-header">性别&nbsp;</h5>
			</li>
	  </ul>



	</td>
    
     <td height="200" style="border:1px solid #666666" valign="top">
	    
		<center>表格设计</center>
	    
		<table width="99%" border="1" align="center" cellpadding="0" cellspacing="0" id="formTable" style="table-layout:fixed;font-size:12px;">
		   <tr>
	          <td  height="40">&nbsp;</td>
			  <td  height="40">&nbsp;</td>
			  <td  height="40">&nbsp;</td>
			  <td  height="40">&nbsp;</td>
			</tr>
			<tr>
	          <td  height="40">&nbsp;</td>
			  <td  height="40">&nbsp;</td>
			  <td  height="40">&nbsp;</td>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js 表单格局设计器

相关资料更多>

推荐阅读更多>