<!DOCTYPE HTML>
<html>
<head>
<title>强大的jQuery拖拽式表单设计器特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="leipi.org">
<link href="Public/css/bootstrap/css/bootstrap.css?2024" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="Public/css/bootstrap/css/bootstrap-ie6.css?2024">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="Public/css/bootstrap/css/ie.css?2024">
<![endif]-->
<link href="Public/css/site.css?2024" rel="stylesheet" type="text/css" />
<style>
#components{
min-height: 600px;
}
#target{
min-height: 200px;
border: 1px solid #ccc;
padding: 5px;
}
#target .component{
border: 1px solid #fff;
}
#temp{
width: 500px;
background: white;
border: 1px dotted #ccc;
border-radius: 10px;
}
.popover-content form {
margin: 0 auto;
width: 213px;
}
.popover-content form .btn{
margin-right: 10px
}
#source{
min-height: 500px;
}
</style>
<!--link href="Public/css/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"-->
</head>
<body><script src="/demos/googlegg.js"></script>
<!-- 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 clas
格式：pdf 资源大小：33.2KB 页数：1
格式：rar 资源大小：257.2KB
格式：rar 资源大小：454.2KB
jQueryQDTZSBDSJQ.zip （30个子文件） 
强大的jQuery拖拽式表单设计器特效 
index.html 13KB Public js formbuild bootstrap img 
glyphicons-halflings.png 12KB glyphicons-halflings-8.png 6KB glyphicons-halflings-white.png 9KB js 
bootstrap.min.js 22KB css bootstrap.v3.css 81KB bootstrap-ie6.min.css 94KB bootstrap-ie6.css 113KB ie.css 1KB bootstrap.css 117KB images 
qrcode.gif 2KB leipi_formbuild.png 6KB progressbar.gif 2KB leipi.form.build.core.js 7KB leipi.form.build.plugins.js 10KB jquery-1.7.2.min.js 93KB css bootstrap img glyphicons-halflings.png 12KB glyphicons-halflings-white.png 9KB js bootstrap.js 60KB bootstrap.min.js 28KB css bootstrap.min.css 104KB bootstrap-responsive.min.css 16KB bootstrap-ie6.min.css 94KB bootstrap-ie6.css 113KB bootstrap-responsive.css 22KB ie.css 1KB bootstrap.css 124KB doc.css 18KB site.css 2KB 说明.htm 4KB资源评论
sdfwefrewrwer2020-04-10uery拖拽式表单设计器特效是一款强大的网页在线自由拖拽式表单设计器jQuery代码特效。
普通网友
- 粉丝: 484
最新资源
- RHEL概述-虚拟化.docx
- 中国建设银行四川省分行无线DDN网络.doc
- 集团公司信息化战略规划方案.pdf
- 农业机械自动化技术的发展现状及优化措施.docx
- 基于ARM的嵌入式土壤水分温定点监测及远程传输系统的应用.doc
- (标线、标志、交通信号灯)工程施工组织设计.doc
- 计算机技术在企业信息化管理运用与探析.docx
- 基于大学计算机学习共同体的网络交互平台的设计.docx
- 信息系统安全设计实施方案模板.doc
- Android入门基础培训.ppt
- 国内外工程项目管理现状比较与探讨.doc
- 基于单片机信号产生电路的设计.doc
- 基于web二级学院人力资源管理系统方案设计书与实现.doc
- NoteExpress文献管理软件.ppt
- CAD在机械制造领域的应用与前景.docx
- Openstack云操作系统产品概述.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
