快捷導(dǎo)航

簡化版手機(jī)端照片預(yù)覽組件

更新時(shí)間：2015年04月13日 10:45:10 投稿：hebedich

這篇文章主要介紹了簡化版手機(jī)端照片預(yù)覽組件的相關(guān)資料,需要的朋友可以參考下

可憐的我用著華為3C手機(jī)，用別人現(xiàn)成的組件都好卡，為了適應(yīng)我這種屌絲，于是自己簡化寫了一版的照片預(yù)覽效果，暫時(shí)無縮放功能，以后可能有空再加吧，你也可以自己加下，這是個(gè)github上的開源項(xiàng)目。它的github地址是：https://github.com/tianxiangbing/mobile-photo-preview

下面是預(yù)覽圖，

使用方法案例:

var photoPreview = new MobilePhotoPreview();
    photoPreview.init({
      target: $('.preview-list'),
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        del.tap(function() {
          photoPreview.current.remove();
          photoPreview.hide();
        });
      }
    });

或者：

$('.preview-list').MobilePhotoPreview({
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        var _this = this;
        del.tap(function() {
          _this.current.remove();
          _this.hide();
        });
      }
    });

注：兩種方法沒有本質(zhì)的區(qū)別，推薦第一種。

API 屬性、方法及回調(diào)：

target:
    表示是在這個(gè)容器內(nèi)的元素會(huì)觸發(fā)事件，它是一個(gè)范圍，與trigger一同使用，委托事件節(jié)點(diǎn)，所以是必須的。建議不作根結(jié)點(diǎn)的委托.
trigger:
    表示觸發(fā)事件的對(duì)象，它可以是動(dòng)態(tài)的，默認(rèn)是target下面的a鏈接觸發(fā)
show:
    顯示之后的回調(diào)，參數(shù)是dialog容器，當(dāng)前this指向MobilePhotoPreview的實(shí)例。這是一個(gè)為了擴(kuò)展更多功能的回調(diào)方法。為了更好的用到這個(gè)回調(diào)，你可以會(huì)對(duì)下面的屬性有興趣了解
this下的屬性及方法：
current:
    當(dāng)前的結(jié)點(diǎn)對(duì)象
currentIndex:
    當(dāng)前索引
objArr:
    數(shù)組對(duì)象，在這里，你可以得到一個(gè)集合，包括索引、element、寬、高。這將會(huì)是很有用的東西。
hide:
    調(diào)用的是dialog的hide.

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: