首页 > 代码库 > 投票项目-bootstrap

投票项目-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();  });});

 

  

技术分享

投票项目-bootstrap