投票项目-bootstrap

<script id="src" type="text/tmpl"> //script标签的type写成这个，浏览器会认为他不是javascript脚本，从而不去解析执行里面的内容
  <div class="tab-wrap">
    <table class="table table-bordered item">
      <tbody>
        <tr>
          <td class="one">选项标题</td>
          <td>
            <input type="text" class="form-control" name="item-title[]" placeholder="选项标题">
          </td>
        </tr>
        <tr>
          <td class="one">选项简介</td>
          <td>
            <textarea class="form-control validate" rows="3" placeholder="请描述选项的主要内容,文字内容不超过300字" name="item-info[]"  data-parent=".form-group"  data-valid="maxlength" data-maxlength="300"></textarea>
          </td>
        </tr>
        <tr>
          <td class="one">上传图片</td>
          <td>
            <div class="upload-container clearfix">
              <div class="upload-box fileinput-button upload-box">
                <div class="upload-icon upload-btn">
                  <img src=""  class="upload-img"/>
                </div>
              </div>
              <input type="file" name="file[]" class="file-img"/>
              <button type="button" class="btn btn-info start startUpload">
                <i class="glyphicon glyphicon-upload"></i>
                <span>开始上传</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="remove-wrap">
      <button type="button" class="btn btn-warning js-btn-cancel">删除选项</button>
    </div>
  </div>
</script>

yp.use([\'formSubmit\'],function(yp) {
  yp.ready(function() {
    var ui = {
      $addBtn: $(\'#add-btn\')
    , $body: $(\'body\')
    , $addWrap: $(\'#add-wrap\')
    , $removeBtn: $(\'.js-btn-cancel\')
    , $sendBtn: $(\'#js-send-btn\')
    , $src: $(\'#src\')
    , $radios: $(\'.radio input[type=radio]\')
    };

    var oPageConfig = window.oPageConfig;
    var oPage = {
      init: function() {
        this.view();
        this.listen();
      }

    , view: function() {
        var self = this;
      }

    , listen: function() {
        var self = this;

        /* 添加选项wrap */
        ui.$addBtn.on(\'click\', function() {
          var $tmpl = $(ui.$src.html());
          $tmpl.insertBefore(ui.$addWrap)
        });
        /* 添加选项wrap end */

        /* 删除选项wrap */
        ui.$body.on(\'click\', \'.js-btn-cancel\', function() {
          var $this = $(this);
          var $parent = $this.closest(\'.tab-wrap\')
          $parent.remove();
        });
        /* 删除选项wrap end */

        /* 提交表单 */
        $(\'form\').formSubmit({
          callback: function(msg) {
            if (msg.code == 0) {
              bootbox.alert(\'提交成功！！\', function() {});
            } else {
             bootbox.alert(msg.message);
            }
          }
        });
        /* 提交表单 end*/

        /* 图片上传前预览 */
        ui.$body.on(\'change\', \'.file-img\', function() {
          var $this = $(this)
            , $uploadImg = $this.closest(\'.upload-container\').find(\'img\');
          var objUrl = self.fGetObjectURL(this.files[0]); //建立一個可存取到該file的url
          if (objUrl) {
            $uploadImg.attr("src", objUrl) ;
          }
        });
      }
    , fGetObjectURL: function(file) {
        var self = this;
        var url = null;
        if (window.createObjectURL!=undefined) { // basic
          url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
      }
    };
    oPage.init();
  });
});