jquery插件leipi.form.build实现拖拽设计生成表单效果代码
代码语言:html
所属分类:拖放
代码描述:jquery插件leipi.form.build实现拖拽设计生成表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML> <html> <head> <title>拖拽式表单设计器 Formbuild.leipi.org</title> <meta name="keyword" content="拖拽式表单设计器,Web Formbuilder,Formbuild,专业表单设计器,高级表单设计器,智能表单设计器,WEB表单设计器,web formdesign,formdesigner"> <meta name="description" content="拖拽式表单设计器Formbuild是强大的在线WEB表单设计器,它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用,你可以在此基础上任意修改使功能无限强大!"> <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 type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.2.3.css"> <style> /* * * Main navigation */ .bs-docs-nav { text-shadow: 0 -1px 0 rgba(0,0,0,.15); /* background-color: #563d7c;*/ border-color: #463265; box-shadow: 0 1px 0 rgba(255,255,255,.1); } .bs-docs-nav .navbar-collapse { border-color: #463265; } .bs-docs-nav .navbar-brand { color: #fff; } .bs-docs-nav .navbar-nav > li > a { color: #cdbfe3; } .bs-docs-nav .navbar-nav > li > a:hover { color: #fff; } .bs-docs-nav .navbar-nav > .active > a, .bs-docs-nav .navbar-nav > .active > a:hover { color: #fff; background: none; } .bs-docs-nav .navbar-toggle { border-color: #563d7c; } .bs-docs-nav .navbar-toggle:hover { background-color: #463265; border-color: #463265; } /* Page headers */ .bs-header { padding: 40px 15px 20px; /* side padding builds on .container 15px, so 30px */ margin: 20px 0; font-size: 16px; text-align: left; text-shadow: 0 1px 0 rgba(0,0,0,.15); background-color: #000; color: #fff;; background-repeat: repeat-x; background-image: -webkit-linear-gradient(45deg, #020031, #563d7c); background-image: -moz-linear-gradient(45deg, #020031, #563d7c); background-image: linear-gradient(45deg, #020031, #563d7c) } .bs-header p { font-weight: 300; line-height: 1.5; } /* * Footer * * Separated section of content at the bottom of all pages, save the homepage. */ .bs-footer { padding-top: 40px; padding-bottom: 30px; margin-top: 40px; color: #777; text-align: left; border-top: 1px solid #e5e5e5; background-color: #f5f5f5 } .footer-links { margin: 10px 0; padding-left: 0; } .footer-links li { display: inline; padding: 0 2px; } .footer-links li:first-child { padding-left: 0; } </style> <script type="text/javascript"> var _root = 'http://formbuild/index.php?s=/', _controller = 'index'; </script> <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> <!-- Docs page layout --> <div class="bs-header" id="content"> <div class="container"> <h1>拖拽式表单设计器 <small>Formbuild Leipi Org</small></h1> <p> <strong>拖拽式</strong> VS <strong>编辑器</strong><br />VS:设计的表单是兼容的,但它们的样式不同,拖拽式是傻瓜式排版而编辑器排版难度大一些但效果更好。 <br /> 交流Q群:143263697 </p> </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> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0