Javascript代码实现仿实例化类

/** * @version $Id$ * @author xjiujiu <xjiujiu@foxmail.com> * @description HHJsLib Framework Apps * @copyright Copyright (c) 2011-2012 http://www.xjiujiu.com.All right reserved */ HHJsLib.register({  init: function() {    this.bindPreviewBtn();    this.bindUploadEleImageBtn();    this.bindUploadEleAudioBtn('a.audio-upload-btn');    this.bindUploadEleVideoBtn('a.video-upload-btn');    this.bindDownloadEleAudioBtn();    this.bindNewConBtn();    this.bindDelConBtn('a.btn-del-con');    this.bindDelItemBtn('a.btn-del-item');    this.bindNewItemBoxClose('div.item-box');    this.bindPlusBtn('a.btn-plus');    this.bindAppendNewElement('div.new-item-box ul li a');    this.bindSetPreviewVideo();    this.bindAddAnswerBtn('a.btn-add-answer');    this.bindDelAnswerBtn('a.btn-del-answer');    this.bindDelImageBtn('a.btn-del-image');    this.bindDelAudioBtn('a.btn-del-audio');    this.initPlusBtn();  },  bindUploadEleVideoBtn: function(dom) {    var self    = this;    $(dom).click(function() {      var $this  = $(this);      var t    = HHJsLib.modal.confirm(        '上传本地视频',        '<div class="text-center">'        + ' <p>浏览您电脑里，从中选择一个视频文件。</p>'        + ' <div class="btn-box btn btn-blue">'        + ' <div id="upload-btn">从电脑上传</div>'        + ' </div>'        + ' </div>'      );      var uploader  = HJZUploader.createVideo(        '#upload-btn',         {           formData: {model: 'timeline'},        },        function(response) {          if(false == response.rs) {            self.setDemoBoxInit($this);            return HHJsLib.warn(response.message);          }          self.setDemoAudioInfo($this, response.data);          $('#dialog-box-' + t).modal('hide');        }      );      uploader.on('uploadProgress', function(file) {        self.setDemoBoxLoading($this);      });       return uploader;    });  },  bindDelAudioBtn: function(dom) {    this.bindDelFileBtn(dom, '真的要删除这个音频吗？');  },  bindDelImageBtn: function(dom) {    this.bindDelFileBtn(dom, '真的要删除这个图片吗？');  },  bindDelFileBtn: function(dom, msg) {    var self  = this;    $(dom).click(function() {      var $target   = $(this);      var t      = HHJsLib.initPopover($(this), msg);      $('#btn-sure-' + t).click(function() {        if(1 != $target.attr('data-new')) {          $.get(            queryUrl + 'timelineele/adel',            {id: $target.attr('data-id')},            function(response) {              if(false === response.rs) {                return HHJsLib.warn(response.message);              }              self.delDemoFieldInfo($target);              $target.popover('destroy');            }          );          return;        }        self.delDemoFieldInfo($target);        $target.popover('destroy');      });    });  },  delDemoFieldInfo: function($target) {    $($target.attr('data-demo-box')).html('');    $($target.attr('data-box')).removeClass('uploaded').addClass('no-file');    $($target.attr('data-field')).attr('data-id', '').attr('data-src', '');  },  bindAddAnswerBtn: function(dom) {    var self  = this;    $(dom).click(function() {      var id     = $(this).attr('data-id');      var answerHtml = eleTplMap.answerTpl.replace(/{id}/g, id);      $('#answer-box-' + id).append(answerHtml);      self.bindDelAnswerBtn('#answer-box-' + id + ' a.btn-del-answer');    });  },  bindDelAnswerBtn: function(dom) {    var self  = this;    $(dom).click(function() {      var $target = $(this);      if(2 > $target.parent().parent().find('textarea.answer-editor').length) {        return HHJsLib.warn('至少需要有一个答案！');      }      var t    = HHJsLib.initPopover($target, '您确定要删除这个答案吗？');      $('#btn-sure-' + t).click(function() {        $target.parent().remove();      });    });  },  bindAppendNewElement: function(dom) {    var self    = this;    $(dom).unbind('click').click(function() {      var type  = $(this).attr('data-type');      var heading   = $(this).parent().parent().attr('data-heading-id');      if('heading' == type) {        self.addNewElePartBox();        $("#new-item-box-" + heading).hide();        return;      }      self.addNewEleToPartBox(heading, type);    });  },  addNewElePartBox: function() {    var t      = this.getTimestamp();    var partBoxHtml = eleTplMap.partBox.replace(/{t}/g, t);    var headingHtml = this.initItemTplByType('heading', t, t);    var itemHtml  = this.initItemTplByType('text', t, t);    var itemBoxHtml = this.initItemBoxTpl(itemHtml, t, t, 'left', 'text');    partBoxHtml   = partBoxHtml.replace(/{heading}/g, headingHtml);    partBoxHtml   = partBoxHtml.replace(/{item}/g, itemBoxHtml);    $("#main-box").append(partBoxHtml);    this.bindDelItemBtn('#item-' + t + ' a.btn-del-item');    this.movePlusBtnBox(t);  },  addNewEleToPartBox: function(heading, type) {    var total    = $('#ele-part-box-' + heading + ' div.item-ele-box').length;    var side    = total % 2 === 0 ? 'left' : 'right';    var t      = this.getTimestamp();    var itemHtml  = this.initItemTplByType(type, t, heading);    var itemBoxHtml = this.initItemBoxTpl(itemHtml, heading, t, side, type);    //清掉原有高度DIV    $('#clearfix-' + heading).remove();    $('#ele-part-box-' + heading).find('div.eles-box').append(itemBoxHtml);    //绑定Dom事件    this.bindDelItemBtn('#item-' + t + ' a.btn-del-item');    this.movePlusBtnBox(heading);    this.bindNewEleUpload(type);  },  bindNewEleUpload: function(type) {    var self  = this;    switch(type) {      case 'image':      case 'question':      case 'know':      self.bindUploadModal('a.btn-upload');      break;      case 'audio':      self.bindUploadEleAudioBtn('a.audio-upload-btn');      self.bindDelAudioBtn('a.btn-del-audio');      break;    }  },  initItemTplByType: function(type, t, heading) {    var itemHtml  = eleTplMap[type].replace(/{t}/g, t);    itemHtml    = itemHtml.replace(/{sort_num}/g, this.getNewEleSortNum(heading));     return itemHtml.replace(/{headingId}/g, heading);  },  initItemBoxTpl: function(content, heading, t, side, type) {    var itemBoxHtml = eleTplMap.itemBox.replace(/{t}/g, t);    itemBoxHtml   = itemBoxHtml.replace(/{headingId}/g, heading);    itemBoxHtml   = itemBoxHtml.replace(/{side}/g, side);    itemBoxHtml   = itemBoxHtml.replace(/{content}/g, content);    itemBoxHtml   = itemBoxHtml.replace(/{hash}/g, hex_md5(t));    itemBoxHtml   += '<div class="clearfix" id="clearfix-' + heading + '"></div>';         return itemBoxHtml.replace(/{type}/g, type);  },  movePlusBtnBox: function(heading) {    //删除原有    $('#new-item-box-' + heading).remove();    //加入新    var plusBtnHtml   = eleTplMap.plusBtn.replace(/{headingId}/g, heading);    $(plusBtnHtml).insertBefore('#clearfix-' + heading);    var $items     = $('#ele-part-box-' + heading).find('div.item-ele-box');    if($items.length < 2) {      $($items[0]).find('a.btn-del-item').hide();    } else {      $($items[0]).find('a.btn-del-item').show();    }    //绑定事件    this.bindAppendNewElement('#new-item-box-' + heading + " ul.new-item-list-box li a");    this.bindPlusBtn('#btn-plus-' + heading);  },  bindNewItemBoxClose: function(dom) {    $(dom).click(function() {      $('div.new-item-box').hide();    });  },  bindPlusBtn: function(dom) {    $(dom).click(function(event) {      $('div.new-item-box').hide();      var id = $(this).attr('data-heading-id');      $('#new-item-box-' + id + ' div.new-item-box').removeClass('hide').attr('data-show', '1').show();      event.preventDefault();    });  },  initPlusBtn: function() {    var self  = this;    $('div.ele-part-box').each(function() {      var dataId   = $(this).attr('data-heading');      self.movePlusBtnBox(dataId);    });  },  bindDelItemBtn: function(dom) {    var self  = this;    $(dom).click(function() {      var $target = $(this);      var t    = HHJsLib.initPopover($target, '您确定要删除这项吗？');      var id   = $target.attr('data-id');      var heading = $('#item-' + id).attr('data-heading-id');      $('#btn-sure-' + t).click(function() {        if(1 == $target.attr('data-new')) {          $.get(            queryUrl + 'timelineele/adel',            {id: $target.attr('data-id')},            function(response) {              if(false === response.rs) {                return HHJsLib.warn(response.message);              }              $('#item-' + id).fadeOut('fast', function() {                $(this).remove();                self.movePlusBtnBox(heading);                self.reArrangeItem(heading);              });              $target.popover('destroy');            }          );          return;        }        $target.popover('destroy');        $('#item-' + id).fadeOut('fast', function() {          $(this).remove();          self.movePlusBtnBox(heading);          self.reArrangeItem(heading);        });      });    });  },  reArrangeItem: function(heading) {    var rank  = 1;    $('#ele-part-box-' + heading).find('div.item-ele-box').each(function() {      if(rank % 2 === 0) {        $(this).removeClass('pull-left item-left')        .addClass('pull-right item-right');      } else {        $(this).removeClass('pull-right item-right')        .addClass('pull-left item-left');      }      rank ++;    });  },  bindNewConBtn: function() {    var self  = this;    $('#btn-new-con-item').click(function() {      var t  = self.getTimestamp();      var conItemHtml   = eleTplMap.conItemTpl.replace(/{t}/g, t);      $('#conclusion-box').append(conItemHtml);      self.bindDelConBtn('#btn-del-con-' + t);      self.bindUploadModal('a.btn-upload');    });  },  bindDelConBtn: function(dom) {    var self  = this;    $(dom).click(function() {      var $target = $(this);      var t    = HHJsLib.initPopover($target, '您确定要删除这个结论吗？');      var id   = $target.attr('data-id');      $('#btn-sure-' + t).click(function() {        if(1 == $target.attr('data-new')) {          $.get(            queryUrl + 'timelineele/adel',            {id: $target.attr('data-id')},            function(response) {              if(false === response.rs) {                return HHJsLib.warn(response.message);              }              $('#item-con-' + id).fadeOut('fast', function() {                $(this).remove();              });              $target.popover('destroy');            }          );          return;        }        $target.popover('destroy');        $('#item-con-' + id).fadeOut('fast', function() {          $(this).remove();        });      });    });  },  getNewEleSortNum: function(heading) {    return parseInt(this.getMaxSortNum(heading)) + 1;  },  getMaxSortNum: function(heading) {    var sortNums  = [];    $('.ele-sort-' + heading).each(function() {      sortNums.push($(this).val());    });    sortNums    = sortNums.sort(function(a, b) {      if (a === b) {         return 0;      }      if (typeof a === typeof b) {        return a > b ? -1 : 1;      }      return typeof a > typeof b ? -1 : 1;    });     return sortNums[0] == null ? 0 : sortNums[0];  },  bindUploadEleImageBtn: function() {    this.bindUploadModal('a.btn-upload');  },  bindUploadEleAudioBtn: function(dom) {    var self    = this;    $(dom).click(function() {      var $this  = $(this);      var t    = HHJsLib.modal.confirm(        '上传音频',        '<div class="text-center">'        + ' <p>浏览您电脑里，从中选择一个音频文件。</p>'        + ' <div class="btn-box btn btn-blue">'        + ' <div id="upload-btn">从电脑上传</div>'        + ' </div>'        + ' </div>'      );      var uploader  = HJZUploader.createAudio(        '#upload-btn',         {           formData: {model: 'timeline'},        },        function(response) {          if(false == response.rs) {            self.setDemoBoxInit($this);            return HHJsLib.warn(response.message);          }          self.setDemoAudioInfo($this, response.data);          $('#dialog-box-' + t).modal('hide');        }      );      uploader.on('uploadProgress', function(file) {        self.setDemoBoxLoading($this);      });       return uploader;    });  },  setDemoAudioInfo: function($target, data) {    var audioHtml  = '<audio controls="controls"><source src="' + siteUrl + data.src + '" /></audio>';    $($target.attr('data-demo-box')).html(audioHtml).show();    $($target.attr('data-field')).attr('data-id', data.id).attr('data-src', data.src);  },  bindUploadModal: function(dom) {    var self    = this;    $(dom).unbind('click').click(function() {      var $this  = $(this);      var t    = HHJsLib.modal.confirm(        '上传图片',        '<div class="text-center">'        + ' <p>浏览您电脑里的图片，从中选择一张。</p>'        + '<div class="btn-box btn btn-blue">'        + ' <div id="upload-btn">从电脑上传</div>'        + ' </div>'        + ' </div>'      );      var uploader  = HJZUploader.createImage(        '#upload-btn',         {           formData: {model: 'timeline'}        },        function(response) {          if(false == response.rs) {            self.setDemoBoxInit($this);            return HHJsLib.warn(response.message);          }          var imgHtml   = '<img src="'            + siteUrl + response.data.src            + '" alt="' + response.data.name + '" />';          $($this.attr('data-demo-box')).html(imgHtml).show();          $($this.attr('data-field')).val(response.data.id).attr('data-src', response.data.src);          $('#dialog-box-' + t).modal('hide');        }      );      uploader.on('uploadProgress', function(file) {        self.setDemoBoxLoading($this);      });      self.bindDelImageBtn('a.btn-del-image');       return uploader;    });  },  bindPreviewBtn: function() {    var self  = this;    $('#edit-btn, #preview-btn').click(function() {      try{        self.verifyBaseInfo();        self.verifyEleInfo();        self.verifyConclusionInfo();        $('#timeline-form').submit();      }catch(e) {        return HHJsLib.warn(e);      }    });  },  verifyBaseInfo: function() {    HHJsLib.isEmptyByDom('#image-path', '时间轴大图');    HHJsLib.isEmptyByDom('#cover', '时间轴封面');    HHJsLib.isEmptyByDom('#name', '标题');    HHJsLib.isEmptyByDom('#description', '描述');  },  verifyEleInfo: function() {    this.verifyHeaderEleInfo();    this.verifyTextEleInfo();    this.verifyImageEleInfo();    this.verifyVideoEleInfo();    this.verifyAudioEleInfo();    this.verifyQuestionEleInfo();    this.verifyKnowEleInfo();  },  verifyHeaderEleInfo: function() {    $('div.item-heading-box').each(function() {      HHJsLib.isEmpty($(this).find('textarea').val(), '头条内容');          });  },  verifyTextEleInfo: function() {    $('div.item-text-box').each(function() {      HHJsLib.isEmptyByDom('#ele-text-' + $(this).attr('data-id'), '文本内容元素');    });  },  verifyImageEleInfo: function() {    $('div.item-image-box').each(function() {      HHJsLib.isEmptyByDom('#ele-image-hash-' + $(this).attr('data-id'), '图片地址');      HHJsLib.isEmptyByDom('#ele-image-content-' + $(this).attr('data-id'), '图片介绍');    });  },  verifyVideoEleInfo: function() {    $('div.item-video-box').each(function() {      HHJsLib.isEmptyByDom('#ele-video-hash-' + $(this).attr('data-id'), '视频地址');      HHJsLib.isEmptyByDom('#ele-video-content-' + $(this).attr('data-id'), '视频介绍');    });  },  verifyAudioEleInfo: function() {    $('div.item-audio-box').each(function() {      HHJsLib.isEmptyByDom('#ele-audio-hash-' + $(this).attr('data-id'), '音频地址');      HHJsLib.isEmptyByDom('#ele-audio-content-' + $(this).attr('data-id'), '音频介绍');    });  },  verifyQuestionEleInfo: function() {    $('div.item-question-box').each(function() {      HHJsLib.isEmptyByDom('#ele-question-content-' + $(this).attr('data-id'), '问题内容');      HHJsLib.isEmptyByDom('#ele-question-extend-' + $(this).attr('data-id'), '问题答案解释');      HHJsLib.isEmpty(answerLen, '问题答案');      $('#answer-box-' + $(this).attr('data-id')).find('textarea').each(function() {        HHJsLib.isEmpty($(this).val(), '问题答案');      });    });  },  verifyKnowEleInfo: function() {    $('div.item-know-box').each(function() {       HHJsLib.isEmptyByDom('#ele-know-hash-' + $(this).attr('data-id'), '知道图片地址');      HHJsLib.isEmptyByDom('#ele-know-content-' + $(this).attr('data-id'), '知道介绍');    });  },  verifyConclusionInfo: function() {    var length     = $('#conclusion-box div.item-con').length;    HHJsLib.isEmpty(length, '总结');    $('#conclusion-box div.item-con').each(function() {      var dataId = $(this).attr('data-id');      HHJsLib.isEmptyByDom('#ele-con-hash-' + dataId, '总结图片');      HHJsLib.isEmptyByDom('#ele-con-content-' + dataId, '总结详情');    });  },  bindDownloadEleAudioBtn: function() {    var self  = this;    $('a.download-audio-btn').click(function() {      var $this    = $(this);      try{        HHJsLib.isEmptyByDom("#item-audio-upload-hash-" + $this.attr('data-id'), '下载地址');        var url   = $("#item-audio-upload-hash-" + $this.attr('data-id')).val();        if('mp3' != url.substring(url.lastIndexOf('.') + 1).toLowerCase()) {          return HHJsLib.warn('格式不支持，必须是Mp3格式！');        }         var t    = HHJsLib.modal.info(          '下载音频',          '<p class="text-center">正在下载音频文件中，请稍等...<p>'        );        self.setDemoBoxLoading($this);        $.getJSON(          siteUrl + 'index.php/public/resource/adownload',           {url: encodeURIComponent(url)},           function(response) {            if(false == response.rs) {              self.setDemoBoxInit($this);              return HHJsLib.warn(response.message);            }            $('#dialog-box-' + t).modal('hide');            self.setDemoAudioInfo($this, response.data);          }        );      } catch(e) {        return HHJsLib.warn(e);      }    });  },  setDemoBoxLoading: function($target) {    $($target.attr('data-box')).removeClass('no-file').addClass('uploaded');    $($target.attr('data-file-box')).html('');  },  setDemoBoxInit: function($target) {    $($target.attr('data-box')).removeClass('uploaded').addClass('no-file');    $($target.attr('data-file-box')).html('');  },  bindSetPreviewVideo: function() {    $('input.ele-video').change(function() {      var url   = $(this).val();      if(url != '') {        if('swf' != url.substring(url.lastIndexOf('.') +1 ).toLowerCase()) {          return HHJsLib.warn('视频地址不合法，请输入有效的在线观看Flash地址！');        }        var previewHtml   = '<embed src="' + url + '" quality="high" width="495" height="220" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>';        $($(this).attr('data-demo-box')).html(previewHtml);      }    });  },  bindDelEleBtnFormEdit: function() {     this.bindDelUploadImgBtn();  },   getTimestamp: function() {     return (new Date()).getTime();   }});