jQuery wab表单设计器代码



84 333 112



特效描述:jQuery wab表单设计器,jQuery wab表单设计器代码

代码结构

1. 引入CSS

<link href="Public/css/bootstrap/css/bootstrap.css?2024" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Public/css/bootstrap/css/bootstrap-ie6.css?2024">
<link rel="stylesheet" type="text/css" href="Public/css/bootstrap/css/ie.css?2024">
<link href="Public/css/site.css?2024" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" charset="utf-8" src="Public/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"  src="Public/js/formbuild/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="Public/js/formbuild/leipi.form.build.core.js"></script>
<script type="text/javascript" charset="utf-8" src="Public/js/formbuild/leipi.form.build.plugins.js"></script>

3. HTML代码

<!-- Docs page layout -->
<div class="bs-header" id="content">
<div class="container">
<h1><img src="Public/js/formbuild/images/leipi_formbuild.png" width="64"/>拖拽式表单设计器</h1>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="span6">
  <div class="clearfix">
	<h2>我的表单</h2>
	<hr>
	<div id="build">
	  <form id="target" class="form-horizontal">
		<fieldset>
		  <div id="legend" class="component" rel="popover" title="编辑属性" trigger="manual"
			data-content="
			<form class='form'>
			  <div class='controls'>
				<label class='control-label'>表单名称</label> <input type='text' id='orgvalue' placeholder='请输入表单名称'>
				<hr/>
				<button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
			  </div>
			</form>"
			>
			<input type="hidden" name="form_name" value="" class="leipiplugins" leipiplugins="form_name"/>
			<legend class="leipiplugins-orgvalue">点击填写表单名</legend>
		  </div>
		</fieldset>
	  </form>
	</div>
  </div>
</div>
<div class="span6">
	<h2>拖拽下面的控件到左侧</h2>
	<hr>
  <div class="tabbable">
	<ul class="nav nav-tabs" id="navtab">
	  <li class="active"><a href="#1" data-toggle="tab">常用控件</a></li>
	  <li class><a href="#2" data-toggle="tab">定制控件</a></li>
	  <li class><a id="sourcetab" href="#5" data-toggle="tab">源代码</a></li>
	</ul>
	<form class="form-horizontal" id="components">
	  <fieldset>
		<div class="tab-content">
		  <div class="tab-pane active" id="1">
<!-- Text start -->
<div class="control-group component" rel="popover" title="文本框控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<!-- Text -->
<label class="control-label leipiplugins-orgname">文本框</label>
<div class="controls">
<input name="leipiNewField" type="text" placeholder="默认值" title="文本框" value="" class="leipiplugins" leipiplugins="text"/>
</div>
</div>
<!-- Text end -->
<!-- Textarea start -->           
<div class="control-group component" rel="popover" title="多行文本控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<!-- Textarea -->
<label class="control-label leipiplugins-orgname">多行文本</label>
<div class="controls">
<div class="textarea">
	  <textarea title="多行文本" name="leipiNewField" class="leipiplugins" leipiplugins="textarea"/> </textarea>
</div>
</div>
</div>
<!-- Textarea end -->
<!-- Select start -->
<div class="control-group component" rel="popover" title="下拉控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>下拉选项</label>
  <textarea style='min-height: 200px' id='orgvalue'></textarea>
  <p class='help-block'>一行一个选项</p>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<!-- Select -->
<label class="control-label leipiplugins-orgname">下拉菜单</label>
<div class="controls">
<select name="leipiNewField" title="下拉菜单" class="leipiplugins" leipiplugins="select">
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>
</div>
</div>
<!-- Select end -->
<!-- Select start -->
<div class="control-group component" rel="popover" title="多选下拉控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>下拉选项</label>
  <textarea style='min-height: 200px' id='orgvalue'></textarea>
  <p class='help-block'>一行一个选项</p>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<!-- Select -->
<label class="control-label leipiplugins-orgname">下拉菜单</label>
<div class="controls">
<select multiple="multiple" name="leipiNewField" title="下拉菜单" class="leipiplugins" leipiplugins="select">
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
  <option>选项四</option>
</select>
</div>
</div>
<!-- Select end -->
<!-- Multiple Checkboxes start -->
<div class="control-group component" rel="popover" title="复选控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>复选框</label>
  <textarea style='min-height: 200px' id='orgvalue'></textarea>
  <p class='help-block'>一行一个选项</p>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<label class="control-label leipiplugins-orgname">复选框</label>
<div class="controls leipiplugins-orgvalue">
<!-- Multiple Checkboxes -->
<label class="checkbox inline">
  <input type="checkbox" name="leipiNewField" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox" orginline="inline">
  选项1
</label>
<label class="checkbox inline">
  <input type="checkbox" name="leipiNewField" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox" orginline="inline">
  选项2
</label>
</div>
</div>
<div class="control-group component" rel="popover" title="复选控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>复选框</label>
  <textarea style='min-height: 200px' id='orgvalue'></textarea>
  <p class='help-block'>一行一个选项</p>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<label class="control-label leipiplugins-orgname">复选框</label>
<div class="controls leipiplugins-orgvalue">
<!-- Multiple Checkboxes -->
<label class="checkbox">
  <input type="checkbox" name="leipiNewField" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox">
  选项1
</label>
<label class="checkbox">
  <input type="checkbox" name="leipiNewField" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox">
  选项2
</label>
</div>
</div>
<!-- Multiple Checkboxes end -->
<!-- Multiple radios start -->
<div class="control-group component" rel="popover" title="单选控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>单选框</label>
  <textarea style='min-height: 200px' id='orgvalue'></textarea>
  <p class='help-block'>一行一个选项</p>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<label class="control-label leipiplugins-orgname">单选</label>
<div class="controls leipiplugins-orgvalue">
<!-- Multiple Checkboxes -->
<label class="radio inline">
  <input type="radio" name="leipiNewField" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio" orginline="inline">
  选项1
</label>
<label class="radio inline">
  <input type="radio" name="leipiNewField" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio" orginline="inline">
  选项2
</label>
</div>
</div>
<div class="control-group component" rel="popover" title="单选控件" trigger="manual"
data-content="
<form class='form'>
<div class='controls'>
  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
  <label class='control-label'>单选框</label>
  <textarea style='min-height: 200px' id='orgvalue'></textarea>
  <p class='help-block'>一行一个选项</p>
  <hr/>
  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<label class="control-label leipiplugins-orgname">单选</label>
<div class="controls leipiplugins-orgvalue">
<!-- Multiple Checkboxes -->
<label class="radio">
  <input type="radio" name="leipiNewField" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio">
  选项1
</label>
<label class="radio">
  <input type="radio" name="leipiNewField" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio">
  选项2
</label>
</div>
</div>
<!-- Multiple radios end -->
		  </div>
		  <div class="tab-pane" id="2">
			<div class="control-group component" rel="popover" title="文件上传" trigger="manual"
			  data-content="
			  <form class='form'>
				<div class='controls'>
				  <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
				  <hr/>
				  <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
				</div>
			  </form>"
			  >
			  <label class="control-label leipiplugins-orgname">文件上传</label>
			  <!-- File Upload -->
			  <div>
				<input type="file" name="leipiNewField" title="文件上传" class="leipiplugins" leipiplugins="uploadfile">
			  </div>
			</div>
		  </div>
		  <div class="tab-pane" id="5">
			<textarea id="source" class="span6"></textarea>
		  </div>
		</fieldset>
	  </form>
	</div><!--tab-content-->
	</div><!---tabbable-->
  </div> <!-- row -->
</div> <!-- /container -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片拖动 图片拖拽 文本框 text文本框 复选框 复选按钮 复选框美化 单选框 单选按钮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到