bootsrap表单构造器【代码】

比眉伴天荒 2024-04-17 18:49 100阅读 0赞

如果用户要搞一份表单然而用户不会手写代码，那这个拖拉生成代码不错

index页面

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Bootstrap表单构造器</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link href="bootstrap.min.css" rel="stylesheet">
  8.     <style>
  9.       body {
  10.         padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  11.         padding-bottom: 10px;
  12.       }
  13.       #components{
  14.         min-height: 600px;
  15.       }
  16.       #target{
  17.         min-height: 200px;
  18.         border: 1px solid #ccc;
  19.         padding: 5px;
  20.       }
  21.       #target .component{
  22.         border: 1px solid #fff;
  23.       }
  24.       #temp{
  25.         width: 500px;
  26.         background: white;
  27.         border: 1px dotted #ccc;
  28.         border-radius: 10px;
  29.       }
  31.       .popover-content form {
  32.         margin: 0 auto;
  33.         width: 213px;
  34.       }
  35.       .popover-content form .btn{
  36.         margin-right: 10px
  37.       }
  38.       #source{
  39.         min-height: 500px;
  40.       }
  41.     </style>
  42.     <link href="bootstrap-responsive.min.css" rel="stylesheet">
  43.     <!--[if lt IE 9]>
  44.     <script src="html5.js"></script>
  45.     <![endif]-->
  46.   </head>
  48.   <body>
  50.     <div class="navbar navbar-fixed-top">
  51.       <div class="navbar-inner">
  52.         <div class="container">
  53.           <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  54.             <span class="icon-bar"></span>
  55.             <span class="icon-bar"></span>
  56.             <span class="icon-bar"></span>
  57.           </a>
  58.           <a class="brand" href="./">Bootstrap 表单构造器</a>
  59.         </div>
  60.       </div>
  61.     </div>
  62.     <div class="container">
  63.       <div class="row clearfix">
  65.         <div class="span6">
  66.             <h2>拖拽下面的组件到左侧</h2>
  67.             <hr>
  68.           <div class="tabbable">
  69.             <ul class="nav nav-tabs" id="navtab">
  70.               <li class="active"><a href="#1" data-toggle="tab">输入框</a></li>
  71.               <li class><a href="#2" data-toggle="tab">Select</a></li>
  72.               <li class><a href="#3" data-toggle="tab">Checkbox / Radio</a></li>
  73.               <li class><a href="#4" data-toggle="tab">文件 / 按钮</a></li>
  74.               <li class><a id="sourcetab" href="#5" data-toggle="tab">生成代码</a></li>
  75.             </ul>
  76.             <form class="form-horizontal" id="components">
  77.               <fieldset>
  78.                 <div class="tab-content">
  80.                   <div class="tab-pane active" id="1">
  82.                     <div class="control-group component" data-type="text" rel="popover" title="Text Input" trigger="manual"
  83.                       data-content="
  84.                       <form class='form'>
  85.                         <div class='controls'>
  86.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  87.                           <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
  88.                           <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
  89.                           <hr/>
  90.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  91.                         </div>
  92.                       </form>"
  93.                       >
  95.                       <!-- Text input-->
  96.                       <label class="control-label valtype" for="input01" data-valtype='label'>Text input</label>
  97.                       <div class="controls">
  98.                         <input type="text" placeholder="placeholder" class="input-xlarge valtype" data-valtype="placeholder" >
  99.                         <p class="help-block valtype" data-valtype='help'>Supporting help text</p>
  100.                       </div>
  101.                     </div>
  104.                     <div class="control-group component" data-type="search" rel="popover" title="Search Input" trigger="manual"
  105.                       data-content="
  106.                       <form class='form'>
  107.                         <div class='controls'>
  108.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  109.                           <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
  110.                           <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
  111.                           <hr/>
  112.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  113.                         </div>
  114.                       </form>"
  115.                       >
  117.                       <!-- Search input-->
  118.                       <label class="control-label valtype" data-valtype="label">Search input</label>
  119.                       <div class="controls">
  120.                         <input type="text" placeholder="placeholder" class="input-xlarge search-query valtype" data-valtype="placeholder">
  121.                         <p class="help-block valtype" data-valtype="help">Supporting help text</p>
  122.                       </div>
  124.                     </div>
  127.                     <div class="control-group component" data-type="prep-text" rel="popover" title="Prepended Text Input" trigger="manual"
  128.                       data-content="
  129.                       <form class='form'>
  130.                         <div class='controls'>
  131.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  132.                           <label class='control-label'>Prepend</label> <input type='text' name='prepend' id='prepend'>
  133.                           <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
  134.                           <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
  135.                           <hr/>
  136.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  137.                         </div>
  138.                       </form>"
  139.                       >
  141.                       <!-- Prepended text-->
  142.                       <label class="control-label valtype" data-valtype="label">Prepended text</label>
  143.                       <div class="controls">
  144.                         <div class="input-prepend">
  145.                           <span class="add-on valtype" data-valtype="prepend">^_^</span>
  146.                           <input class="span2 valtype" placeholder="placeholder" id="prependedInput" type="text" data-valtype="placeholder">
  147.                         </div>
  148.                         <p class="help-block valtype" data-valtype="help">Supporting help text</p>
  149.                       </div>
  151.                     </div>
  153.                     <div class="control-group component" data-type="app-text" rel="popover" title="Appended Text Input" trigger="manual"
  154.                       data-content="
  155.                       <form class='form'>
  156.                         <div class='controls'>
  157.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  158.                           <label class='control-label'>Appepend</label> <input type='text' name='append' id='append'>
  159.                           <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
  160.                           <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
  161.                           <hr/>
  162.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  163.                         </div>
  164.                       </form>"
  165.                       >
  167.                       <!-- Appended input-->
  168.                       <label class="control-label valtype" data-valtype="label">Appended text</label>
  169.                       <div class="controls">
  170.                         <div class="input-append">
  171.                           <input class="span2 valtype" data-valtype="placeholder" placeholder="placeholder" type="text">
  172.                           <span class="add-on valtype" data-valtype="append">^_^</span>
  173.                         </div>
  174.                         <p class="help-block valtype" data-valtype="help">Supporting help text</p>
  175.                       </div>
  177.                     </div>
  179.                     <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
  180.                       data-content="
  181.                       <form class='form'>
  182.                         <div class='controls'>
  183.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  184.                           <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
  185.                           <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
  186.                           <label class='checkbox'><input type='checkbox' class='input-inline' name='checked' id='checkbox'>Checked</label>
  187.                           <hr/>
  188.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  189.                         </div>
  190.                       </form>"
  191.                       >
  193.                       <!-- Prepended checkbox -->
  194.                       <label class="control-label valtype" data-valtype="label">Prepended checkbox</label>
  195.                       <div class="controls">
  196.                         <div class="input-prepend">
  197.                           <span class="add-on">
  198.                             <label class="checkbox">
  199.                               <input type="checkbox" class="valtype" data-valtype="checkbox">
  200.                             </label>
  201.                           </span>
  202.                           <input class="span2 valtype" placeholder="placeholder" type="text" data-valtype="placeholder">
  203.                         </div>
  204.                         <p class="help-block valtype" data-valtype="help">Supporting help text</p>
  205.                       </div>
  207.                     </div>
  209.                     <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
  210.                       data-content="
  211.                       <form class='form'>
  212.                         <div class='controls'>
  213.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  214.                           <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
  215.                           <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
  216.                           <label class='checkbox'><input type='checkbox' class='input-inline' name='checked' id='checkbox'>Checked</label>
  217.                           <hr/>
  218.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  219.                         </div>
  220.                       </form>"
  221.                       >
  223.                       <!-- Appended checkbox -->
  224.                       <label class="control-label valtype" data-valtype="label">Append checkbox</label>
  225.                       <div class="controls">
  226.                         <div class="input-append">
  227.                           <input class="span2 valtype" placeholder="placeholder" type="text" data-valtype="placeholder">
  228.                           <span class="add-on">
  229.                             <label class="checkbox" for="appendedCheckbox">
  230.                               <input type="checkbox" class="valtype" data-valtype="checkbox">
  231.                             </label>
  232.                           </span>
  233.                         </div>
  234.                         <p class="help-block valtype" data-valtype="help">Supporting help text</p>
  235.                       </div>
  236.                     </div>
  238.                     <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
  239.                       data-content="
  240.                       <form class='form'>
  241.                         <div class='controls'>
  242.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  243.                           <hr/>
  244.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  245.                         </div>
  246.                       </form>"
  247.                       >
  249.                       <!-- Textarea -->
  250.                       <label class="control-label valtype" data-valtype="label">Textarea</label>
  251.                       <div class="controls">
  252.                         <div class="textarea">
  253.                               <textarea type="" class="valtype" data-valtype="checkbox" /> </textarea>
  254.                         </div>
  255.                       </div>
  256.                     </div>
  258.                   </div>
  260.                   <div class="tab-pane" id="2">
  262.                     <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
  263.                       data-content="
  264.                       <form class='form'>
  265.                         <div class='controls'>
  266.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  267.                           <label class='control-label'>Options: </label>
  268.                           <textarea style='min-height: 200px' id='option'> </textarea>
  269.                           <hr/>
  270.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  271.                         </div>
  272.                       </form>"
  273.                       >
  275.                       <!-- Select Basic -->
  276.                       <label class="control-label valtype" data-valtype="label">Select - Basic</label>
  277.                       <div class="controls">
  278.                         <select class="input-xlarge valtype" data-valtype="option">
  279.                           <option>Enter</option>
  280.                           <option>Your</option>
  281.                           <option>Options</option>
  282.                           <option>Here!</option>
  283.                         </select>
  284.                       </div>
  286.                     </div>
  288.                     <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
  289.                       data-content="
  290.                       <form class='form'>
  291.                         <div class='controls'>
  292.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  293.                           <label class='control-label'>Options: </label>
  294.                           <textarea style='min-height: 200px' id='option'></textarea>
  295.                           <hr/>
  296.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  297.                         </div>
  298.                       </form>"
  299.                       >
  301.                       <!-- Select Multiple -->
  302.                       <label class="control-label valtype" data-valtype="label">Select - Multiple</label>
  303.                       <div class="controls">
  304.                         <select class="input-xlarge valtype" multiple="multiple" data-valtype="option">
  305.                           <option>Enter</option>
  306.                           <option>Your</option>
  307.                           <option>Options</option>
  308.                           <option>Here!</option>
  309.                         </select>
  310.                       </div>
  311.                     </div>
  313.                   </div>
  315.                   <div class="tab-pane" id="3">
  317.                     <div class="control-group component" rel="popover" title="Multiple Checkboxes" trigger="manual"
  318.                       data-content="
  319.                       <form class='form'>
  320.                         <div class='controls'>
  321.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  322.                           <label class='control-label'>Options: </label>
  323.                           <textarea style='min-height: 200px' id='checkboxes'> </textarea>
  324.                           <hr/>
  325.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  326.                         </div>
  327.                       </form>"
  328.                       >
  329.                       <label class="control-label valtype" data-valtype="label">Checkboxes</label>
  330.                       <div class="controls valtype" data-valtype="checkboxes">
  332.                         <!-- Multiple Checkboxes -->
  333.                         <label class="checkbox">
  334.                           <input type="checkbox" value="Option one">
  335.                           Option one
  336.                         </label>
  337.                         <label class="checkbox">
  338.                           <input type="checkbox" value="Option two">
  339.                           Option two
  340.                         </label>
  341.                       </div>
  343.                     </div>
  345.                     <div class="control-group component" rel="popover" title="Multiple Radios" trigger="manual"
  346.                       data-content="
  347.                       <form class='form'>
  348.                         <div class='controls'>
  349.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  350.                           <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'>
  351.                           <label class='control-label'>Options: </label>
  352.                           <textarea style='min-height: 200px' id='radios'></textarea>
  353.                           <hr/>
  354.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  355.                         </div>
  356.                       </form>"
  357.                       >
  358.                       <label class="control-label valtype" data-valtype="label">Radio buttons</label>
  359.                       <div class="controls valtype" data-valtype="radios">
  361.                         <!-- Multiple Radios -->
  362.                         <label class="radio">
  363.                           <input type="radio" value="Option one" name="group" checked="checked">
  364.                           Option one
  365.                         </label>
  366.                         <label class="radio">
  367.                           <input type="radio" value="Option two" name="group">
  368.                           Option two
  369.                         </label>
  370.                       </div>
  372.                     </div>
  374.                     <div class="control-group component" rel="popover" title="Inline Checkboxes" trigger="manual"
  375.                       data-content="
  376.                       <form class='form'>
  377.                         <div class='controls'>
  378.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  379.                           <textarea style='min-height: 200px' id='inline-checkboxes'></textarea>
  380.                           <hr/>
  381.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  382.                         </div>
  383.                       </form>"
  384.                       >
  385.                       <label class="control-label valtype" data-valtype="label">Inline Checkboxes</label>
  387.                       <!-- Multiple Checkboxes -->
  388.                       <div class="controls valtype" data-valtype="inline-checkboxes">
  389.                         <label class="checkbox inline">
  390.                           <input type="checkbox" value="1"> 1
  391.                         </label>
  392.                         <label class="checkbox inline">
  393.                           <input type="checkbox" value="2"> 2
  394.                         </label>
  395.                         <label class="checkbox inline">
  396.                           <input type="checkbox" value="3"> 3
  397.                         </label>
  398.                       </div>
  400.                     </div>
  402.                     <div class="control-group component" rel="popover" title="Inline radioes" trigger="manual"
  403.                       data-content="
  404.                       <form class='form'>
  405.                         <div class='controls'>
  406.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  407.                           <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'>
  408.                           <textarea style='min-height: 200px' id='inline-radios'></textarea>
  409.                           <hr/>
  410.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  411.                         </div>
  412.                       </form>"
  413.                       >
  414.                       <label class="control-label valtype" data-valtype="label">Inline radios</label>
  415.                       <div class="controls valtype" data-valtype="inline-radios">
  417.                         <!-- Inline Radios -->
  418.                         <label class="radio inline">
  419.                           <input type="radio" value="1" checked="checked" name="group">
  420.                           1
  421.                         </label>
  422.                         <label class="radio inline">
  423.                           <input type="radio" value="2" name="group">
  424.                           2
  425.                         </label>
  426.                         <label class="radio inline">
  427.                           <input type="radio" value="3">
  428.                           3
  429.                         </label>
  430.                       </div>
  431.                     </div>
  433.                   </div>
  435.                   <div class="tab-pane" id="4">
  436.                     <div class="control-group component" rel="popover" title="File Upload" trigger="manual"
  437.                       data-content="
  438.                       <form class='form'>
  439.                         <div class='controls'>
  440.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  441.                           <hr/>
  442.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  443.                         </div>
  444.                       </form>"
  445.                       >
  446.                       <label class="control-label valtype" data-valtype="label">File Button</label>
  448.                       <!-- File Upload -->
  449.                       <div class="controls">
  450.                         <input class="input-file" id="fileInput" type="file">
  451.                       </div>
  452.                     </div>
  454.                     <div class="control-group component" rel="popover" title="Search Input" trigger="manual"
  455.                       data-content="
  456.                       <form class='form'>
  457.                         <div class='controls'>
  458.                           <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
  459.                           <label class='control-label'>Button Text</label> <input class='input-large' type='text' name='label' id='button'>
  460.                           <label class='control-label' id=''>Type: </label>
  461.                           <select class='input' id='color'>
  462.                             <option id='btn-default'>Default</option>
  463.                             <option id='btn-primary'>Primary</option>
  464.                             <option id='btn-info'>Info</option>
  465.                             <option id='btn-success'>Success</option>
  466.                             <option id='btn-warning'>Warning</option>
  467.                             <option id='btn-danger'>Danger</option>
  468.                             <option id='btn-inverse'>Inverse</option>
  469.                           </select>
  470.                           <hr/>
  471.                           <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  472.                         </div>
  473.                       </form>"
  474.                       >
  475.                       <label class="control-label valtype" data-valtype="label">Button</label>
  477.                       <!-- Button -->
  478.                       <div class="controls valtype"  data-valtype="button">
  479.                         <button class='btn btn-success'>Button</button>
  480.                       </div>
  481.                     </div>
  482.                   </div>
  485.                   <div class="tab-pane" id="5">
  486.                     <textarea id="source" class="span6"></textarea>
  487.                   </div>
  488.                 </fieldset>
  489.               </form>
  490.             </div>
  491.           </div> <!-- row -->
  492.                 <div class="span6">
  493.           <div class="clearfix">
  494.             <h2>Your Form</h2>
  495.             <hr>
  496.             <div id="build">
  497.               <form id="target" class="form-horizontal">
  498.                 <fieldset>
  499.                   <div id="legend" class="component" rel="popover" title="Form Title" trigger="manual"
  500.                     data-content="
  501.                     <form class='form'>
  502.                       <div class='controls'>
  503.                         <label class='control-label'>Title</label> <input class='input-large' type='text' name='title' id='text'>
  504.                         <hr/>
  505.                         <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
  506.                       </div>
  507.                     </form>"
  508.                     >
  509.                     <legend class="valtype" data-valtype="text">表单名</legend>
  510.                   </div>
  511.                 </fieldset>
  512.               </form>
  513.             </div>
  514.           </div>
  515.         </div>
  516.         </div> <!-- /container -->
  517.         <script src="jquery.min.js"></script>
  518.         <script src="bootstrap.min.js"></script>
  519.         <script src="fb.js"></script>
  521.       </body>
  522.     </html>

核心fb.js

  1. $(document).ready(function(){
  2.   $("form").delegate(".component", "mousedown", function(md){
  3.     $(".popover").remove();
  5.     md.preventDefault();
  6.     var tops = [];
  7.     var mouseX = md.pageX;
  8.     var mouseY = md.pageY;
  9.     var $temp;
  10.     var timeout;
  11.     var $this = $(this);
  12.     var delays = {
  13.       main: 0,
  14.       form: 120
  15.     }
  16.     var type;
  18.     if($this.parent().parent().parent().parent().attr("id") === "components"){
  19.       type = "main";
  20.     } else {
  21.       type = "form";
  22.     }
  24.     var delayed = setTimeout(function(){
  25.       if(type === "main"){
  26.         $temp = $("<form class='form-horizontal span6' id='temp'></form>").append($this.clone());
  27.       } else {
  28.         if($this.attr("id") !== "legend"){
  29.           $temp = $("<form class='form-horizontal span6' id='temp'></form>").append($this);
  30.         }
  31.       }
  33.       $("body").append($temp);
  35.       $temp.css({"position" : "absolute",
  36.                  "top"      : mouseY - ($temp.height()/2) + "px",
  37.                  "left"     : mouseX - ($temp.width()/2) + "px",
  38.                  "opacity"  : "0.9"}).show()
  40.       var half_box_height = ($temp.height()/2);
  41.       var half_box_width = ($temp.width()/2);
  42.       var $target = $("#target");
  43.       var tar_pos = $target.position();
  44.       var $target_component = $("#target .component");
  46.       $(document).delegate("body", "mousemove", function(mm){
  48.         var mm_mouseX = mm.pageX;
  49.         var mm_mouseY = mm.pageY;
  51.         $temp.css({"top"      : mm_mouseY - half_box_height + "px",
  52.           "left"      : mm_mouseX - half_box_width  + "px"});
  54.         if ( mm_mouseX > tar_pos.left &&
  55.           mm_mouseX < tar_pos.left + $target.width() + $temp.width()/2 &&
  56.           mm_mouseY > tar_pos.top &&
  57.           mm_mouseY < tar_pos.top + $target.height() + $temp.height()/2
  58.           ){
  59.             $("#target").css("background-color", "#fafdff");
  60.             $target_component.css({"border-top" : "1px solid white", "border-bottom" : "none"});
  61.             tops = $.grep($target_component, function(e){
  62.               return ($(e).position().top -  mm_mouseY + half_box_height > 0 && $(e).attr("id") !== "legend");
  63.             });
  64.             if (tops.length > 0){
  65.               $(tops[0]).css("border-top", "1px solid #22aaff");
  66.             } else{
  67.               if($target_component.length > 0){
  68.                 $($target_component[$target_component.length - 1]).css("border-bottom", "1px solid #22aaff");
  69.               }
  70.             }
  71.           } else{
  72.             $("#target").css("background-color", "#fff");
  73.             $target_component.css({"border-top" : "1px solid white", "border-bottom" : "none"});
  74.             $target.css("background-color", "#fff");
  76.           }
  78.       });
  80.       $("body").delegate("#temp", "mouseup", function(mu){
  81.         mu.preventDefault();
  83.         var mu_mouseX = mu.pageX;
  84.         var mu_mouseY = mu.pageY;
  85.         var tar_pos = $target.position();
  87.         $("#target .component").css({"border-top" : "1px solid white", "border-bottom" : "none"});
  89.         // acting only if mouse is in right place
  90.         if (mu_mouseX + half_box_width > tar_pos.left &&
  91.           mu_mouseX - half_box_width < tar_pos.left + $target.width() &&
  92.           mu_mouseY + half_box_height > tar_pos.top &&
  93.           mu_mouseY - half_box_height < tar_pos.top + $target.height()
  94.           ){
  95.             $temp.attr("style", null);
  96.             // where to add
  97.             if(tops.length > 0){
  98.               $($temp.html()).insertBefore(tops[0]);
  99.             } else {
  100.               $("#target fieldset").append($temp.append("\n\n\ \ \ \ ").html());
  101.             }
  102.           } else {
  103.             // no add
  104.             $("#target .component").css({"border-top" : "1px solid white", "border-bottom" : "none"});
  105.             tops = [];
  106.           }
  108.         //clean up & add popover
  109.         $target.css("background-color", "#fff");
  110.         $(document).undelegate("body", "mousemove");
  111.         $("body").undelegate("#temp","mouseup");
  112.         $("#target .component").popover({trigger: "manual",placement:"bottom"});
  113.         $temp.remove();
  114.         genSource();
  115.       });
  116.     }, delays[type]);
  118.     $(document).mouseup(function () {
  119.       clearInterval(delayed);
  120.       return false;
  121.     });
  122.     $(this).mouseout(function () {
  123.       clearInterval(delayed);
  124.       return false;
  125.     });
  126.   });
  128.   var genSource = function(){
  129.     var $temptxt = $("<div>").html($("#build").html());
  130.     $($temptxt).find(".component").attr({"title": null,
  131.       "data-original-title":null,
  132.       "data-type": null,
  133.       "data-content": null,
  134.       "rel": null,
  135.       "trigger":null,
  136.       "style": null});
  137.     $($temptxt).find(".valtype").attr("data-valtype", null).removeClass("valtype");
  138.     $($temptxt).find(".component").removeClass("component");
  139.     $($temptxt).find("form").attr({"id":  null, "style": null});
  140.     $("#source").val($temptxt.html().replace(/\n\ \ \ \ \ \ \ \ \ \ \ \ /g,"\n"));
  142.   }
  144.   //activate legend popover
  145.   $("#target .component").popover({trigger: "manual",placement:"bottom"});
  146.   //popover on click event
  147.   $("#target").delegate(".component", "click", function(e){
  148.     e.preventDefault();
  149.     $(".popover").hide();
  150.     var $active_component = $(this);
  151.     $active_component.popover("show");
  153.     //console.log($active_component.position());
  156.     var valtypes = $active_component.find(".valtype");
  158.     $.each(valtypes, function(i,e){
  159.       var valID ="#" + $(e).attr("data-valtype");
  160.       var val;
  161.       if(valID ==="#placeholder"){
  162.         val = $(e).attr("placeholder");
  163.         $(".popover " + valID).val(val);
  164.       } else if(valID==="#checkbox"){
  165.         val = $(e).attr("checked");
  166.         $(".popover " + valID).attr("checked",val);
  167.       } else if(valID==="#option"){
  168.         val = $.map($(e).find("option"), function(e,i){return $(e).text()});
  169.         val = val.join("\n")
  170.       $(".popover "+valID).text(val);
  171.       } else if(valID==="#checkboxes"){
  172.         val = $.map($(e).find("label"), function(e,i){return $(e).text().trim()});
  173.         val = val.join("\n")
  174.       $(".popover "+valID).text(val);
  175.       } else if(valID==="#radios"){
  176.         val = $.map($(e).find("label"), function(e,i){return $(e).text().trim()});
  177.         val = val.join("\n");
  178.         $(".popover "+valID).text(val);
  179.         $(".popover #name").val($(e).find("input").attr("name"));
  180.       } else if(valID==="#inline-checkboxes"){
  181.         val = $.map($(e).find("label"), function(e,i){return $(e).text().trim()});
  182.         val = val.join("\n")
  183.           $(".popover "+valID).text(val);
  184.       } else if(valID==="#inline-radios"){
  185.         val = $.map($(e).find("label"), function(e,i){return $(e).text().trim()});
  186.         val = val.join("\n")
  187.           $(".popover "+valID).text(val);
  188.         $(".popover #name").val($(e).find("input").attr("name"));
  189.       } else if(valID==="#button") {
  190.         val = $(e).text();
  191.         var type = $(e).find("button").attr("class").split(" ").filter(function(e){return e.match(/btn-.*/)});
  192.         $(".popover #color option").attr("selected", null);
  193.         if(type.length === 0){
  194.           $(".popover #color #default").attr("selected", "selected");
  195.         } else {
  196.           $(".popover #color #"+type[0]).attr("selected", "selected");
  197.         }
  198.         val = $(e).find(".btn").text();
  199.         $(".popover #button").val(val);
  200.       } else {
  201.         val = $(e).text();
  202.         $(".popover " + valID).val(val);
  203.       }
  204.     });
  206.     $(".popover").delegate(".btn-danger", "click", function(e){
  207.       e.preventDefault();
  208.       $active_component.popover("hide");
  209.     });
  211.     $(".popover").delegate(".btn-info", "click", function(e){
  212.       e.preventDefault();
  213.       var inputs = $(".popover input");
  214.       inputs.push($(".popover textarea")[0]);
  215.       $.each(inputs, function(i,e){
  216.       var vartype = $(e).attr("id");
  217.       var value = $active_component.find('[data-valtype="'+vartype+'"]')
  218.       if(vartype==="placeholder"){
  219.         $(value).attr("placeholder", $(e).val());
  220.       } else if (vartype==="checkbox"){
  221.         if($(e).is(":checked")){
  222.           $(value).attr("checked", true);
  223.         }
  224.         else{
  225.           $(value).attr("checked", false);
  226.         }
  227.       } else if (vartype==="option"){
  228.         var options = $(e).val().split("\n");
  229.         $(value).html("");
  230.         $.each(options, function(i,e){
  231.           $(value).append("\n      ");
  232.           $(value).append($("<option>").text(e));
  233.         });
  234.       } else if (vartype==="checkboxes"){
  235.         var checkboxes = $(e).val().split("\n");
  236.         $(value).html("\n      <!-- Multiple Checkboxes -->");
  237.         $.each(checkboxes, function(i,e){
  238.           if(e.length > 0){
  239.             $(value).append('\n      <label class="checkbox">\n        <input type="checkbox" value="'+e+'">\n        '+e+'\n      </label>');
  240.           }
  241.         });
  242.         $(value).append("\n  ")
  243.       } else if (vartype==="radios"){
  244.         var group_name = $(".popover #name").val();
  245.         var radios = $(e).val().split("\n");
  246.         $(value).html("\n      <!-- Multiple Radios -->");
  247.         $.each(radios, function(i,e){
  248.           if(e.length > 0){
  249.             $(value).append('\n      <label class="radio">\n        <input type="radio" value="'+e+'" name="'+group_name+'">\n        '+e+'\n      </label>');
  250.           }
  251.         });
  252.         $(value).append("\n  ")
  253.           $($(value).find("input")[0]).attr("checked", true)
  254.       } else if (vartype==="inline-checkboxes"){
  255.         var checkboxes = $(e).val().split("\n");
  256.         $(value).html("\n      <!-- Inline Checkboxes -->");
  257.         $.each(checkboxes, function(i,e){
  258.           if(e.length > 0){
  259.             $(value).append('\n      <label class="checkbox inline">\n        <input type="checkbox" value="'+e+'">\n        '+e+'\n      </label>');
  260.           }
  261.         });
  262.         $(value).append("\n  ")
  263.       } else if (vartype==="inline-radios"){
  264.         var radios = $(e).val().split("\n");
  265.         var group_name = $(".popover #name").val();
  266.         $(value).html("\n      <!-- Inline Radios -->");
  267.         $.each(radios, function(i,e){
  268.           if(e.length > 0){
  269.             $(value).append('\n      <label class="radio inline">\n        <input type="radio" value="'+e+'" name="'+group_name+'">\n        '+e+'\n      </label>');
  270.           }
  271.         });
  272.         $(value).append("\n  ")
  273.           $($(value).find("input")[0]).attr("checked", true)
  274.       } else if (vartype === "button"){
  275.         var type =  $(".popover #color option:selected").attr("id");
  276.         $(value).find("button").text($(e).val()).attr("class", "btn "+type);
  277.       } else {
  278.         $(value).text($(e).val());
  279.       }
  280.     $active_component.popover("hide");
  281.     genSource();
  282.     });
  283.     });
  284.   });
  285.   $("#navtab").delegate("#sourcetab", "click", function(e){
  286.     genSource();
  287.   });
  288. });

发表评论

表情：
评论列表 （有 0 条评论，100人围观）

还没有评论，来说两句吧...

相关阅读