jQuery wab表單設計器代碼



88 348 117



特效描述: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

加群請備注:從官網了解到

老夫子电子