本例使用了jquery
同时加入了jquery ui 的sortable来进行排序（也仅使用了ui的该功能）（如不想引入jqueryui可直接删除相应事件绑定即可。）
<!DOCTYPE html PUBdivC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World jQuery!</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style type=text/css>
body{font-family:Verdana,宋体; font-size:12px; margin:5px; padding:5px; }
#sortable { margin: 0; padding: 0; width: 700px; align:center;}
.tagView{width:100%;}
.tagEdit{};
.titleInput{width:150px;}
.valueInput{width:200px;}
.selectInput{width:100px;}
.item-capital, .itemDiv .item-capital { border: 1px solid #cccccc; background-color: #f6f6f6; font-weight: bold; color: #1c94c4; outline: none;height:100%; }
.itemDiv { border: 1px solid #dddddd; background: #eeeeee; color: #333333; height:100%; margin:5px; }
.item-content{border-bottom:1px solid #cccccc;width:100%;height:25px;line-height:25px;}
.item-content table{width:100%;}
.item-content table tr{width:100%;}
.item-content table td{white-space:nowrap;}
.item-capital{width:100%;height:25px;line-height:25px;}
.item-capital table{width:100%;}
.item-capital table tr{width:100%;}
.item-capital table td{white-space:nowrap;}
.tdBtn{text-align:right;}
.tdTitle{width:30%;}
.tdValue{white-space:nowrap;background-color:white;width:60%;}
.perviewTable{background-color: #cccccc; color: #333333; height:20px; margin:5px; width:600px;borde:1px solid red;}
.perviewCapital{background: #f6f6f6; font-weight: bold; color: #1c94c4;}
.perviewCapital th{text-align:center; }
.perviewTR{}
.perviewTR .title{width:30%;text-align:right;background: #eeeeee; }
.perviewTR .tag{width:70%;background-color:white;text-align:left;}
#editTable legend{width:100%;}
#editTable legend table{width:100%;}
#editTable legend #title{width:5%;white-space:nowrap;}
#editTable legend #line{width:95%;white-space:nowrap;}
#editTable legend #btn{white-space:nowrap;}
</style>
</head>
<body>
<div style="width:700px;">
<fieldset id=editTable>
<legend>
<table>
<tr><td id=title>配置表单</td><td id=line><hr/></td><td id=btn><input id=addItem type=button value=添加大项 ><td></tr>
</table>
</legend>
<div id=sortable>
<div class=itemDiv>
<div class=item-capital >
<table>
<tr>
<td class=tdTitle>
<div class=capitalView style=display:none></div>
<div class=capitalEdit >
<input class=titleInput type=text value=标题 />
</div>
</td>
<td class=tdBtn style=width:70%;text-align:right; >
<input class=btnAddItem type=button value=添加 onclick=addContent(this) /><input class=btnAddItem type=button value=删除 onclick=deleteItem(this) />
</td>
</tr>
</table>
</div>
<div class=item-content>
<table><tr>
<td class=tdTitle>
<div class=capitalView style=display:none></div>
<div class=capitalEdit >
<input class=titleInput type=text value=小标题 />
</div>
</td>
<td> :
</td>
<td class=tdValue>
<div class=tagView style=display:none ></div>
<div class=tagEdit >
<select class=selectInput value=text>
<option value=text>文本框</option>
<option value=select>下拉框</option>
<option value=textarea>文本域</option>
<option value=radio>单选按钮</option>
<option value=checkbox>多选按钮</option>
</select>
<input class=valueInput type=text value=预设值 /><input class=nullable type=checkbox value=nullable>必填</input>
</div>
</td>
<td class=tdBtn style=text-align:right; >
<input class=btnAddItem type=button value=删除 onclick=deleteContent(this) />
</td>
</tr></table>
</div>
</div><!--end itemDiv-->
<div><!--end sortable-->
</fieldset>
<br/>
<center>
<form id="frm" action="" method="post">
<input id="configStr" name="configStr" type="hidden">
<input type=button value=预览 onclick="perview()">
<input type=button id=subBut value=提交 >
</form>
</center>
<fieldset style="width:690px;text-align:center;">
<legend>预览</legend>
<div id=perview style=width:690px; >
</div>
</fieldset>
</div>
<script type="text/javascript" >
//自定义函数
var item_Div = "<div class=itemDiv><div class=item-capital ><table><tr><td class=tdTitle><div class=capitalView style=display:none></div><div class=capitalEdit ><input class=titleInput type=text value=标题 /></div></td>";
item_Div += "<td class=tdBtn style=w idth:70%;text-align:right; ><input class=btnAddItem type=button value=添加 onclick=addContent(this) /><input class=btnAddItem type=button value=删除 onclick=deleteItem(this) /></td></tr></table></div></div>";
var item_content = "<div class=item-content><table><tr><td class=tdTitle><div class=capitalView style=display:none></div><div class=capitalEdit ><input class=titleInput type=text value=小标题 /></div></td><td> :</td>";
item_content += "<td class=tdValue><div class=tagView style=display:none ></div><div class=tagEdit ><select class=selectInput value=text><option value=text>文本框</option><option value=select>下拉框</option><option value=textarea>文本域</option><option value=radio>单选按钮</option><option value=checkbox>多选按钮</option></select> <input class=valueInput type=text value=预设值 /><input class=nullable type=checkbox value=nullable>必填</input></div>";
item_content += "</td><td class=tdBtn style=text-align:right; ><input class=btnAddItem type=button value=删除 onclick=deleteContent(this) /></td></tr></table></div>";
function itemPerview(type,value,oDIV){
oDIV.html(getTag(type,value));
}
//组装标签
function getTag(type,value){
var html="";
var htmlOptions="";
switch(type){
case 'text':html="<input type='text' style='width:150px;' value="+value+">";break;
case 'select':
options=value.split(",");
for(var i in options){
htmlOptions+="<option value="+options[i]+" >"+options[i]+"</option>";
}
html+="<select style='width:150px;' >";
html+=htmlOptions;
html+="</select>";
break;
case 'textarea':
html="<textarea style='width:95%;' rows=5>"+value+"</textarea>";
break;
case 'radio':
options=value.split(",");
for(var i in options){
html+="<input type=radio name=r1 checked value="+options[i]+" >"+options[i]+"</input>";
}
break;
case 'checkbox':
options=value.split(",");
for(var i in options){
html+="<input type=checkbox name=cb1 value="+options[i]+" >"+options[i]+"</input>";
}
break;
}
return html;
}
//添加小项
function addContent(obj){
var jobj=$(obj);
var oItemDiv = jobj.closest(".itemDiv");//找到最近的 closest找到顶层最近的
oItemDiv.append(item_content);
}
//删除大项
function deleteItem(obj){
var jobj=$(obj);
var oItemDiv = jobj.closest(".itemDiv");
oItemDiv.attr('className','delete');
oItemDiv.css('display','none');
}
//删除小项
function deleteContent(obj){
var jobj=$(obj);
var oItemDiv = jobj.closest(".item-content");
oItemDiv.attr('className','delete');
oItemDiv.css('display','none');
}
//全局预览
function perview(){
var jsonStr = getJsonData(); //alert(jsonStr);
var oJson = eval(jsonStr);//转化为json对象 //alert(oJson[0].capital);
createFormByJson(oJson);
}
//获取表单全部数据
function getJsonData(){
//json字符串示例：[{capital:'标题',items[{title:'小标题',type:'text',value:'预设值'},{},{}]},{},{}]
var jsonStr = new String("[");
var oItems = $("#sortable").children(".itemDiv");//children找子元素，find找后代
oItems.each(function (index, domEle){
var oItem = $(domEle);
var oCapital = oItem.find(".item-capital");
jsonStr+="{capital:'"+oCapital.find(".titleInput").val()+"',items:[";//写标题，开始一个大项
var oContent = oItem.find(".item-content");
oContent.each(function (index, domEle){
//alert(domEle.find(".titleInput").val());
var jobj = $(domEle);
jsonStr+="{title:'"+jobj.find(".titleInput").val()+"',";//开始写一个小项
jsonStr+="type:'"+jobj.find(".selectInput").val()+"',";
jsonStr+="value:'"+jobj.find(".valueInput").val()+"',";
jsonStr+="nullable:'"+jobj.find(".nullable").attr("checked")+"'},";//写完一个小项
});
if (oContent.length > 0) {
jsonStr = jsonStr.substring(0,jsonStr.length-1);//去掉最后一个逗号
}
jsonStr+="]},";//写完一个大项
});
jsonStr = jsonStr.substring(0,jsonStr.length-1);//去掉最后一个逗号
jsonStr+="]";
return(jsonStr);
}
//创建预览 通过json数据对象创建预览
function createFormByJson(oJson){
var html="";
for(var i in oJson){
html+="<table class=perviewTable cellspacing=1><tr class=perviewCapital><th colspan=100>"+oJson[i].capital+"</th></tr>";
for (var j in oJson[i].items){
//oJson[i].items[j].title oJson[i].items[j].type oJson[i].items[j].value
if (oJson[i].items[j].nullable=='false') {
html+="<tr class=perviewTR><td class=title>"+oJson[i].items[j].title+":</td><td class=tag>"+getTag(oJson[i].items[j].type,oJson[i].items[j].value)+"</td></tr>";
}else{
html+="<tr class=perviewTR><td class=title>*"+oJson[i].items[j].title+":</td><td class=tag>"+getTag(oJson[i].items[j].type,oJson[i].items[j].value)+"</td></tr>";
}
}
html+="</table>";
}
$("#perview").html(html);
//$("#perview").dialog({ modal: true });
}
//事件绑定
$(function() {
//live绑定：应用到所有及新增的
//切换到编辑状态
$(".btnEdit").live('click',function(event){
showEdit(this);
event.stopPropagation();
});
//切换到预览状态
$(".btnSubmit").live('click',function(event){
showSubmit(this);
event.stopPropagation();
});
//添加大项
$("#addItem").click(function(event){
$("#sortable").append(item_Div);
})
//提交表单配置数据
$("#subBut").click(function(event){
$("#configStr").val(getJsonData());
$("#frm").submit();
})
//大项排序
$("#sortable").sortable({opacity: '0.8',axis:'y'});
//$("#sortable").disableSelection();
});
//加载时执行的语句函数
$(function() {
});
</script>
</body>
</html>
分享到：
相关推荐
代码简介：jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单，可自定义拖拽控制生成表单，预览表单，表单各种属性可通过json格式的配置来处理控制表单的各个属性，看起来非常的高大上，...
在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高数据质量和用户体验。jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到...
本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form插件的基本用法。在开始之前，请确保已经在项目中引入了jQuery库以及jQuery.form插件。通常，这两个文件可以通过...
在本项目中，"jQuery实现带Tooltip表单验证的注册表单.zip" 是一个包含使用jQuery库来构建具有工具提示（Tooltip）功能的表单验证的示例。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、...
它不仅能够帮助开发者轻松地实现表单数据的Ajax提交，还支持文件上传等功能，极大地提升了用户体验并降低了服务器压力。本文主要针对“jquery表单验证插件”进行详细介绍，并通过示例代码展示其使用方法。 #### 二...
在“jQuery超强验证表单”这个主题中，我们将深入探讨如何利用jQuery来实现高效且用户友好的表单验证。** **1. jQuery基础知识** 在深入表单验证之前，我们需要了解jQuery的基本用法。jQuery通过选择器（如$("#id")...
通过利用jQuery的DOM操作和事件绑定，开发者可以轻松地实现表单的动态切换和验证。 ### 插件概述 该插件的主要目标是创建一个分页滑动的注册流程，每个步骤之间通过平滑的动画过渡。这不仅使界面看起来更专业，也...
Formalize可以与其他jQuery插件如Validation Engine、jQuery UI等配合使用，实现更高级的表单验证和用户交互。同时，开发者也可以基于Formalize编写自己的扩展，以满足特定项目的需求。 总结来说，jQuery Formalize...
1. **可视化编辑**：jQuery表单设计器通常配备了一个拖放界面，允许用户通过直观的方式添加、移动和配置表单元素，如输入框、选择框、复选框、按钮等。 2. **自定义样式**：用户可以自定义表单控件的样式，包括颜色...
3. **基本使用**：首先需要在页面中引入jQuery库和验证插件的脚本文件，然后选择需要验证的表单元素，通过`.validate()`方法初始化验证器，并配置验证规则。 4. **验证规则**：你可以设置如`required`（必填）、`...
此外，jQuery还有许多插件可以进一步提升表单的用户体验，例如`jQuery UI`的Autocomplete插件可以实现输入框的自动补全，`jQuery Form Plugin`可以轻松处理表单提交，包括异步提交（AJAX）和文件上传。这些插件通常...
在开发Web应用时，表单预览和提交功能是经常需要实现的功能。为了增强用户体验，开发者往往会在用户点击提交之前，提供一个预览功能，让用户能够确认自己所填写的数据是否正确无误。通过使用jQuery这种流行的...
**jQuery表单验证插件详解** 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高用户体验...无论是新手还是经验丰富的开发者，掌握jQuery表单验证技术都是必不可少的技能之一。
jQuery Validation Engine是一款强大的JavaScript库，专门用于实现网页表单的验证功能。它是基于流行的JavaScript库jQuery构建的，为开发者提供了一种优雅的方式来处理用户输入的数据验证。这个插件以其高度可定制性...
动态表单验证是Web开发中一个重要的环节，...通过合理配置和使用，可以轻松实现动态、高效的表单验证，提升用户交互体验。在实际项目中，根据需求调整验证规则和提示样式，可以打造出满足各种业务场景的表单验证系统。
这篇博客“关于用jQuery实现效果”很可能是分享如何使用jQuery来创建各种网页动态效果的教程。虽然没有具体的描述，但我们可以根据标题推测其内容可能涵盖了jQuery的基础知识以及一些实用技巧。 首先，jQuery的核心...
本示例"jQuery表单消息提示功能"着重于提升用户交互体验，通过利用jQuery的事件处理和DOM操作来实现表单验证和提示信息的动态显示。下面将详细探讨相关知识点。 首先，jQuery中的表单处理主要涉及两个方面：事件...
本资源“jQuery实现的可直接添加删除表单元素特效源码.zip”提供了一种利用jQuery实现动态添加和删除表单元素的特效代码。下面将详细介绍这个主题中的相关知识点。 一、jQuery库的引入与基本使用 jQuery库通过一个...
这样的工具通常允许开发者或非开发者根据需求动态创建和配置表单元素，如输入框、下拉菜单、复选框、单选按钮等，同时提供验证和数据处理功能。 以下是这个主题中可能涉及的一些核心知识点： 1. **jQuery基础**：...