xform-builder
/
index.html

<!doctype html>
<html lang="zh-Hans">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="ludongping">
  <title>XForm-Builder</title>

  <!-- Bootstrap core CSS -->
  <link href="assets/lib/bootstrap-4.5.3-dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/lib/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">

  <link href="assets/lib/bootstrap-icons-1.3.0/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/lib/fontawesome-free-5.15.1-web/css/fontawesome.min.css" rel="stylesheet">
  <link href="assets/lib/fontawesome-free-5.15.1-web/css/brands.min.css" rel="stylesheet">

  <!-- Custom styles for this page -->
  <link href="index.css" rel="stylesheet">
</head>

<body>
  <!-- 顶部区域 开始 -->
  <nav class="banner navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <div class="navbar-brand col-md-3 col-lg-2 mx-0 px-0">
      <span class="brand"><i class="bi-columns-gap mr-2 mb-2"></i>X-Form Builder</span>
    </div>
    <div class="w-100">
      <div class="btn-group btn-group-toggle btn-group-format ml-xl-3" data-toggle="buttons">
        <label class="btn btn-secondary active">
          <i class="fab fa-bootstrap"></i><input type="radio" name="options" checked>Bootstrap
        </label>
        <label class="btn btn-secondary">
          <i class="fab fa-vuejs"></i><input type="radio" name="options" >Vue
        </label>
        <label class="btn btn-secondary">
          <i class="fab fa-angular"></i><input type="radio" name="options">Angular
        </label>
        <label class="btn btn-secondary">
          <i class="fab fa-weixin"></i><input type="radio" name="options">微信
        </label>
        <label class="btn btn-secondary">
          <i class="bi-lightning"></i><input type="radio" name="options">Layui
        </label>
        <label class="btn btn-secondary">
          <i class="fab fa-java"></i><input type="radio" name="options">Java Swing
        </label>
        <label class="btn btn-secondary">
          <i class="bi-cpu"></i><input type="radio" name="options">Gtk
        </label>
        <label class="btn btn-secondary">
          <i class="fab fa-windows"></i><input type="radio" name="options">WinForm
        </label>
      </div>
    </div>
    <div class="btn-group btn-group-toggle btn-group-action mr-xl-3" data-toggle="buttons" style="width: 20rem;">
      <label id="preview-button" class="btn btn-secondary">
        <i class="bi-phone"></i><input type="radio" name="options">手机
      </label>
      <label id="code-button" class="btn btn-secondary active">
        <i class="bi-laptop"></i><input type="radio" name="options" checked>电脑
      </label>
    </div>
  </nav>
  <!-- 顶部区域 结束 -->

  <div class="container-fluid">
    <div class="row">
      <!-- 左边组件区域 开始 -->
      <section id="widgets-panel" class="col-md-3 col-lg-2 d-md-block bg-light px-0 collapse">
        <div class="components-list row p-0 m-0">
          <div class="widget-cate col-12"><i class="bi-house"></i></span>基础组件</div>
          <div data-type="input" class="form-edit-widget-label col-6"><a><i class="bi-alarm"></i><span>单行文本</span></a></div>
          <div data-type="textarea" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>多行文本</span></a></div>
          <div data-type="radio" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>单选框组</span></a></div>
          <div data-type="checkbox" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>多选框组</span></a></div>
          <!-- <div data-type="time" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>时间选择器</span></a></div> -->
          <!-- <div data-type="date" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>日期选择器</span></a></div> -->

          <div class="widget-cate col-12"><i class="bi-house"></i></span>容器</div>
          <div data-type="grid" class="form-edit-widget-label col-6"><a><i class="bi-alarm"></i><span>新栅格容器</span></a></div>

          <div class="widget-cate col-12"><i class="bi-house"></i></span>高级组件</div>
          <!-- <div data-type="markdown" class="form-edit-widget-label col-6"><a><i class="bi-alarm"></i><span>Markdown</span></a></div> -->
          <!-- <div data-type="tinymce" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>TinyMCE</span></a></div> -->
          <div data-type="area-linkage" class="form-edit-widget-label col-6"><a><i class="bi-textarea"></i><span>省市区</span></a></div>
        </div>
      </section>
      <!-- 左边组件区域 结束 -->

      <!-- 中心设计区域 开始 -->
      <section id="design-panel" role="main" class="col-md-6 col-lg-8 px-0 pt-1">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link active" id="main-tab-btn-design" data-toggle="tab" href="#main-tab-panel-design" role="tab" aria-controls="design" aria-selected="true"><i class="bi-columns-gap"></i>设计</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="main-tab-btn-preview" data-toggle="tab" href="#main-tab-panel-preview" role="tab" aria-controls="preview" aria-selected="false"><i class="bi-eye"></i>预览</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="main-tab-btn-code" data-toggle="tab" href="#main-tab-panel-code" role="tab" aria-controls="code" aria-selected="false"><i class="bi-code"></i>代码</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane show active m-1" id="main-tab-panel-design" role="tabpanel" aria-labelledby="design-tab">
            <div id="widget-form-container" class="widget-form-container">
              <form id="design-form" class="top-form p-1">

              </form>
            </div>
          </div>
          <div class="tab-pane p-1" id="main-tab-panel-preview" role="tabpanel" aria-labelledby="preview-tab">
            <div id="preview-body" class="preview-body">

            </div>
          </div>
          <div class="tab-pane p-1" id="main-tab-panel-code" role="tabpanel" aria-labelledby="code-tab">
            <textarea id="code-textarea" class="code-textarea"></textarea>
          </div>
        </div>
      </section>
      <!-- 中心设计区域 结束 -->

      <!-- 右侧面板 开始 -->
      <section id="property-panel" class="col-md-3 col-lg-2 px-0 d-md-block bg-light pt-1">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link active" id="prop-tab-btn-field" data-toggle="tab" href="#prop-tab-panel-field" role="tab" aria-controls="home" aria-selected="true">字段</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="prop-tab-btn-form" data-toggle="tab" href="#prop-tab-panel-form" role="tab" aria-controls="profile" aria-selected="false">表单</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="prop-tab-btn-other" data-toggle="tab" href="#prop-tab-panel-other" role="tab" aria-controls="contact" aria-selected="false">其它</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane show active p-1" id="prop-tab-panel-field" role="tabpanel" aria-labelledby="home-tab">
          </div>
          <div class="tab-pane p-1" id="prop-tab-panel-form" role="tabpanel" aria-labelledby="profile-tab">
            <form id='prop-tab-form'>
              <div class="input-group mb-1">
                <div class="input-group-prepend">
                  <span class="input-group-text">表格标题</span>
                </div>
                <input type="text" class="form-control" aria-describedby="basic-addon3">
              </div>
              <div class="input-group mb-1">
                <div class="input-group-prepend">
                  <span class="input-group-text">宽度</span>
                </div>
                <input type="text" class="form-control" aria-describedby="basic-addon3">
              </div>
            </form>
          </div>
          <div class="tab-pane p-1" id="prop-tab-panel-other" role="tabpanel" aria-labelledby="contact-tab">
            <form id='prop-tab-other'>
              <div class="input-group mb-1">
                <div class="input-group-prepend">
                  <span class="input-group-text">主题</span>
                </div>
                <input type="text" class="form-control" aria-describedby="basic-addon3">
              </div>
            </form>
          </div>
        </div>
      </section>
      <!-- 右侧面板 结束 -->


    </div>
  </div>

  <script src="assets/lib/jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script src="assets/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script src="assets/lib/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
  <script src="index.js"></script>

  <!-- 拖拽组件时插入的代码片段 -->
  <section class='code-template invisible'>
    <div class='frag-input'>
      <div data-type='input' class="form-group form-widget p-2">
        <label>单行文本</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">@</span>
          </div>
          <input type="text" class="form-control" placeholder="用户名称" required>
          <div class="invalid-feedback" style="width: 100%;">
            请填写用户名称!
          </div>
        </div>
      </div>
    </div>
    <div class='frag-textarea'>
      <div data-type='textarea' class="form-group form-widget p-2">
        <label>多行文本</label>
        <textarea class="form-control" rows="3" placeholder="用户名称"></textarea>
      </div>
    </div>
    <div class='frag-grid'>
      <div data-type='grid' class="row form-widget grid">
        <div class="layout-handler w-100"></div>
        <div class="widget-form-list row col-12"></div>
      </div>
    </div>

  </section>
<!-- 不同组件的不同属性设置-->
<section class='widget-properties invisible'>
  <div class="prop-input">
    <form>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">列宽(1-12)</span>
        </div>
        <input type="text" class="form-control" name='col' value="12" data-field='col'>
      </div>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">标题</span>
        </div>
        <input type="text" class="form-control" data-field='label' >
      </div>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">占位内容</span>
        </div>
        <input type="text" class="form-control" data-field='placeholder'>
      </div>
    </form>
  </div>
  <div class="prop-textarea">
    <form>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">列宽(1-12)</span>
        </div>
        <input type="text" class="form-control" name='col' value="12" data-field='col'>
      </div>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">标题</span>
        </div>
        <input type="text" class="form-control" data-field='label' >
      </div>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">行数</span>
        </div>
        <input type="text" class="form-control" data-field='rows'>
      </div>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">占位内容</span>
        </div>
        <input type="text" class="form-control" data-field='placeholder'>
      </div>
    </form>
  </div>
  <div class="prop-grid">
    <form>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">列宽(1-12)</span>
        </div>
        <input type="text" class="form-control" name='col' value="12" data-field='col'>
      </div>
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text">子组件默认列宽(1-12)</span>
        </div>
        <input type="text" class="form-control" value="12" data-field="defaultCol">
      </div>
    </form>
  </div>
</section>

</body>

</html>