[js開源組件開發]-手機端相片預覽版組件

標籤：

手機端相片預覽版組件

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

下面是預覽圖，它的完整demo請點擊這裏手機端相片預覽版組件demo

 

使用方法案例:

 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();            });        }    });

　　

註：兩種方法沒有本質的區別，推薦第一種。

API 屬性、方法及回調：target:

    表示是在這個容器內的元素會觸發事件，它是一個範圍，與trigger一同使用，委託事件節點，所以是必須的。建議不作根結點的委託.

trigger:

    表示觸發事件的對象，它可以是動態，預設是target下面的a連結觸發

show:

    顯示之後的回調，參數是dialog容器，當前this指向MobilePhotoPreview的執行個體。這是一個為了擴充更多功能的回調方法。為了更好的用到這個回調，你可以會對下面的屬性有興趣瞭解

this下的屬性及方法：current:

    當前的結點對象

currentIndex:

    當前索引

objArr:

    數組對象，在這裡，你可以得到一個集合，包括索引、element、寬、高。這將會是很有用的東西。

hide:

    調用的是dialog的hide.

[js開源組件開發]-手機端相片預覽版組件