深蓝计划(功能篇)表单构建器分析

你猜 阅读:163 2021-03-31 21:43:45 评论:0

源码:

<!DOCTYPE html> 
<!-- saved from url=(0048)http://www.bootcss.com/p/bootstrap-form-builder/ --> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <title>Bootstrap表单构造器</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="基于Bootstrap的web表单构造器,通过拖拽组件的方式生成完整可用的表单"> 
    <meta name="keywords" content="Bootstrap,Form,表单,拖拽"> 
    <meta name="author" content="Bootstrap中文网"> 
 
    <link href="./表单生成器/bootstrap.min.css" rel="stylesheet"> 
    <style> 
      body { 
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
        padding-bottom: 10px; 
      } 
      #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="./表单生成器/bootstrap-responsive.min.css" rel="stylesheet"> 
 
    <!--[if lt IE 9]> 
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
 
    <link rel="shortcut icon" href="http://www.bootcss.com/p/bootstrap-form-builder/images/favicon.ico"> 
    <link rel="apple-touch-icon" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon.png"> 
    <link rel="apple-touch-icon" sizes="72x72" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon-72x72.png"> 
    <link rel="apple-touch-icon" sizes="114x114" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon-114x114.png"> 
  </head> 
 
  <body> 
 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container"> 
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
          </a> 
          <a class="brand" href="./表单生成器/Bootstrap表单构造器.htm">Bootstrap 表单构造器</a> 
        </div> 
      </div> 
    </div> 
    <div class="container"> 
      <div class="row clearfix"> 
        <div class="span6"> 
          <div class="clearfix"> 
            <h2>Your Form</h2> 
            <hr> 
            <div id="build"> 
              <form id="target" class="form-horizontal" style="background-color: rgb(255, 255, 255);"> 
                <fieldset> 
                  <div id="legend" class="component" rel="popover" trigger="manual" data-content=" 
                    <form class='form'> 
                      <div class='controls'> 
                        <label class='control-label'>Title</label> <input class='input-large' type='text' name='title' id='text'> 
                        <hr/> 
                        <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                      </div> 
                    </form>" data-original-title="Form Title" style="border-top-width: 1px; border-top-style: solid; border-top-color: white; border-bottom-style: none;"> 
                    <legend class="valtype" data-valtype="text">表单名</legend> 
                  </div> 
                <div class="control-group component" data-type="prep-text" rel="popover" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Prepend</label> <input type='text' name='prepend' id='prepend'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>" data-original-title="Prepended Text Input"> 
 
                      <!-- Prepended text--> 
                      <label class="control-label valtype" data-valtype="label">Prepended text</label> 
                      <div class="controls"> 
                        <div class="input-prepend"> 
                          <span class="add-on valtype" data-valtype="prepend">^_^</span> 
                          <input class="span2 valtype" placeholder="placeholder" id="prependedInput" type="text" data-valtype="placeholder"> 
                        </div> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
 
                    </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="http://www.bootcss.com/p/bootstrap-form-builder/#1" data-toggle="tab">输入框</a></li> 
              <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#2" data-toggle="tab">Select</a></li> 
              <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#3" data-toggle="tab">Checkbox / Radio</a></li> 
              <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#4" data-toggle="tab">文件 / 按钮</a></li> 
              <li class=""><a id="sourcetab" href="http://www.bootcss.com/p/bootstrap-form-builder/#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"> 
 
                    <div class="control-group component" data-type="text" rel="popover" title="Text Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Text input--> 
                      <label class="control-label valtype" for="input01" data-valtype="label">Text input</label> 
                      <div class="controls"> 
                        <input type="text" placeholder="placeholder" class="input-xlarge valtype" data-valtype="placeholder"> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
                    </div> 
 
 
                    <div class="control-group component" data-type="search" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Search input--> 
                      <label class="control-label valtype" data-valtype="label">Search input</label> 
                      <div class="controls"> 
                        <input type="text" placeholder="placeholder" class="input-xlarge search-query valtype" data-valtype="placeholder"> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
 
                    </div> 
 
 
                    <div class="control-group component" data-type="prep-text" rel="popover" title="Prepended Text Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Prepend</label> <input type='text' name='prepend' id='prepend'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Prepended text--> 
                      <label class="control-label valtype" data-valtype="label">Prepended text</label> 
                      <div class="controls"> 
                        <div class="input-prepend"> 
                          <span class="add-on valtype" data-valtype="prepend">^_^</span> 
                          <input class="span2 valtype" placeholder="placeholder" id="prependedInput" type="text" data-valtype="placeholder"> 
                        </div> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" data-type="app-text" rel="popover" title="Appended Text Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Appepend</label> <input type='text' name='append' id='append'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Appended input--> 
                      <label class="control-label valtype" data-valtype="label">Appended text</label> 
                      <div class="controls"> 
                        <div class="input-append"> 
                          <input class="span2 valtype" data-valtype="placeholder" placeholder="placeholder" type="text"> 
                          <span class="add-on valtype" data-valtype="append">^_^</span> 
                        </div> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <label class='checkbox'><input type='checkbox' class='input-inline' name='checked' id='checkbox'>Checked</label> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Prepended checkbox --> 
                      <label class="control-label valtype" data-valtype="label">Prepended checkbox</label> 
                      <div class="controls"> 
                        <div class="input-prepend"> 
                          <span class="add-on"> 
                            <label class="checkbox"> 
                              <input type="checkbox" class="valtype" data-valtype="checkbox"> 
                            </label> 
                          </span> 
                          <input class="span2 valtype" placeholder="placeholder" type="text" data-valtype="placeholder"> 
                        </div> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'> 
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'> 
                          <label class='checkbox'><input type='checkbox' class='input-inline' name='checked' id='checkbox'>Checked</label> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Appended checkbox --> 
                      <label class="control-label valtype" data-valtype="label">Append checkbox</label> 
                      <div class="controls"> 
                        <div class="input-append"> 
                          <input class="span2 valtype" placeholder="placeholder" type="text" data-valtype="placeholder"> 
                          <span class="add-on"> 
                            <label class="checkbox" for="appendedCheckbox"> 
                              <input type="checkbox" class="valtype" data-valtype="checkbox"> 
                            </label> 
                          </span> 
                        </div> 
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p> 
                      </div> 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Textarea --> 
                      <label class="control-label valtype" data-valtype="label">Textarea</label> 
                      <div class="controls"> 
                        <div class="textarea"> 
                              <textarea type="" class="valtype" data-valtype="checkbox"> </textarea> 
                        </div> 
                      </div> 
                    </div> 
 
                  </div> 
 
                  <div class="tab-pane" id="2"> 
 
                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Options: </label> 
                          <textarea style='min-height: 200px' id='option'> </textarea> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Select Basic --> 
                      <label class="control-label valtype" data-valtype="label">Select - Basic</label> 
                      <div class="controls"> 
                        <select class="input-xlarge valtype" data-valtype="option"> 
                          <option>Enter</option> 
                          <option>Your</option> 
                          <option>Options</option> 
                          <option>Here!</option> 
                        </select> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Options: </label> 
                          <textarea style='min-height: 200px' id='option'></textarea> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
 
                      <!-- Select Multiple --> 
                      <label class="control-label valtype" data-valtype="label">Select - Multiple</label> 
                      <div class="controls"> 
                        <select class="input-xlarge valtype" multiple="multiple" data-valtype="option"> 
                          <option>Enter</option> 
                          <option>Your</option> 
                          <option>Options</option> 
                          <option>Here!</option> 
                        </select> 
                      </div> 
                    </div> 
 
                  </div> 
 
                  <div class="tab-pane" id="3"> 
 
                    <div class="control-group component" rel="popover" title="Multiple Checkboxes" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Options: </label> 
                          <textarea style='min-height: 200px' id='checkboxes'> </textarea> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
                      <label class="control-label valtype" data-valtype="label">Checkboxes</label> 
                      <div class="controls valtype" data-valtype="checkboxes"> 
 
                        <!-- Multiple Checkboxes --> 
                        <label class="checkbox"> 
                          <input type="checkbox" value="Option one"> 
                          Option one 
                        </label> 
                        <label class="checkbox"> 
                          <input type="checkbox" value="Option two"> 
                          Option two 
                        </label> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Multiple Radios" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'> 
                          <label class='control-label'>Options: </label> 
                          <textarea style='min-height: 200px' id='radios'></textarea> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
                      <label class="control-label valtype" data-valtype="label">Radio buttons</label> 
                      <div class="controls valtype" data-valtype="radios"> 
 
                        <!-- Multiple Radios --> 
                        <label class="radio"> 
                          <input type="radio" value="Option one" name="group" checked="checked"> 
                          Option one 
                        </label> 
                        <label class="radio"> 
                          <input type="radio" value="Option two" name="group"> 
                          Option two 
                        </label> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Inline Checkboxes" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <textarea style='min-height: 200px' id='inline-checkboxes'></textarea> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
                      <label class="control-label valtype" data-valtype="label">Inline Checkboxes</label> 
 
                      <!-- Multiple Checkboxes --> 
                      <div class="controls valtype" data-valtype="inline-checkboxes"> 
                        <label class="checkbox inline"> 
                          <input type="checkbox" value="1"> 1 
                        </label> 
                        <label class="checkbox inline"> 
                          <input type="checkbox" value="2"> 2 
                        </label> 
                        <label class="checkbox inline"> 
                          <input type="checkbox" value="3"> 3 
                        </label> 
                      </div> 
 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Inline radioes" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'> 
                          <textarea style='min-height: 200px' id='inline-radios'></textarea> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
                      <label class="control-label valtype" data-valtype="label">Inline radios</label> 
                      <div class="controls valtype" data-valtype="inline-radios"> 
 
                        <!-- Inline Radios --> 
                        <label class="radio inline"> 
                          <input type="radio" value="1" checked="checked" name="group"> 
                          1 
                        </label> 
                        <label class="radio inline"> 
                          <input type="radio" value="2" name="group"> 
                          2 
                        </label> 
                        <label class="radio inline"> 
                          <input type="radio" value="3"> 
                          3 
                        </label> 
                      </div> 
                    </div> 
 
                  </div> 
 
                  <div class="tab-pane" id="4"> 
                    <div class="control-group component" rel="popover" title="File Upload" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
                      <label class="control-label valtype" data-valtype="label">File Button</label> 
 
                      <!-- File Upload --> 
                      <div class="controls"> 
                        <input class="input-file" id="fileInput" type="file"> 
                      </div> 
                    </div> 
 
                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content=" 
                      <form class='form'> 
                        <div class='controls'> 
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'> 
                          <label class='control-label'>Button Text</label> <input class='input-large' type='text' name='label' id='button'> 
                          <label class='control-label' id=''>Type: </label> 
                          <select class='input' id='color'> 
                            <option id='btn-default'>Default</option> 
                            <option id='btn-primary'>Primary</option> 
                            <option id='btn-info'>Info</option> 
                            <option id='btn-success'>Success</option> 
                            <option id='btn-warning'>Warning</option> 
                            <option id='btn-danger'>Danger</option> 
                            <option id='btn-inverse'>Inverse</option> 
                          </select> 
                          <hr/> 
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button> 
                        </div> 
                      </form>"> 
                      <label class="control-label valtype" data-valtype="label">Button</label> 
 
                      <!-- Button --> 
                      <div class="controls valtype" data-valtype="button"> 
                        <button class="btn btn-success">Button</button> 
                      </div> 
                    </div> 
                  </div> 
 
 
                  <div class="tab-pane" id="5"> 
                    <textarea id="source" class="span6"></textarea> 
                  </div> 
                </div></fieldset> 
              </form> 
            </div> 
          </div> <!-- row --> 
          <div class="row clearfix"> 
            <div class="span12"> 
              <hr> 
              By Adam Moore (<a href="http://twitter.com/minikomi">@minikomi</a>).<br> 
              Source on (<a href="http://github.com/minikomi">Github</a>). 
              <p>Bootstrap 表单构造器由<a href="http://www.bootcss.com/">Bootstrap中文网</a>翻译整理</p> 
            </div> 
          </div> 
        </div> <!-- /container --> 
        <script src="./表单生成器/jquery.min.js"></script> 
        <script src="./表单生成器/bootstrap.min.js"></script> 
 
        <script src="./表单生成器/fb.js"></script> 
 
    <script src="./表单生成器/projects.js"></script><script src="./表单生成器/h.js" type="text/javascript"></script><script src="./表单生成器/h(1).js" type="text/javascript"></script> 
       
     
</div><div id="site-navbar" style="position: absolute; top: -4px; left: -3px; border: 0; z-index: 2000;padding:0;margin:0;"><a href="http://www.bootcss.com/" title="返回首页" style="background:none;"><img src="./表单生成器/return-back.png" style="padding:0;margin:0;border:0; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;"></a></div></body></html>


资源文件:


效果展示:

表单构建器下载地址:http://download.csdn.net/detail/zhouzhiwengang/9618784

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号