2

jquery をよりよく学ぶために、 Google+ のようなギャラリー コラージュ効果を作成するプラグインを作成することにしました。ここに例があります。

画像を含むhtml要素のサイズを変更すると、もう一度トリガーしたいと思います。私が抱えている問題の一部は、画像サイズを再計算して収まるようにするために、元の画像サイズを保存する必要があることです。

元の画像サイズを保存する場所と取得する方法がわかりません。プラグイン全体は上にリンクされていますが、ここに要約を記載します。

;(function( $ ) {
    $.fn.collagePlus = function( options ) {

        var settings = $.extend( 
            //... 
            'images'          : $('img', $(this))
            //... 
        );

        return this.each(function() {
            settings.images.each(function(index){
                //... 

                /*
                * get the current image size
                */
                var w = (typeof $(this).data().width != 'undefined') ? $(this).data().width : $(this).width();
                var h = (typeof $(this).data().height != 'undefined') ? $(this).data().height : $(this).height();

                /*
                * store the original size for resize events
                */
                $(this).attr( "data-width" , w  );
                $(this).attr( "data-height" , h  ); 
                //... Do some other stuff
                }
            );
        });
    }
})( jQuery );
4

2 に答える 2

4

.data()間違って使用しています。関数に1つのパラメーターを渡すと、指定さ.dataれたキーの値が返されます。2つのパラメータを渡すと、.dataはそのキーの値を設定します。

このブロック：

//get the current image size
var w = (typeof $(this).data().width != 'undefined') ? $(this).data().width : $(this).width();
var h = (typeof $(this).data().height != 'undefined') ? $(this).data().height : $(this).height();

する必要があります：

var $this = $(this); //caching your selector
if (!$this.data('width')) //if this element doesn't have a width stored
    $this.data('width', $this.width()); //stores currently computed width
if (!$this.data('height')) //repeat
    $this.data('height', $this.height());

そしてもちろん、後でデータを取得するには：

alert($this.data('width')) //alerts currently stored width

フィドルデモ

.dataプロパティのマップを渡す際にオブジェクトを保存することもできます。

if (!$(this).data('size'))
    $(this).data('size', { width: $(this).width(), height: $(this).height() });

これで、に格納されているオブジェクトのプロパティになりますwidth。これは、次のコマンドで取得できます。height.data('size')

alert($(this).data('size').width);

フィドル

簡単にするために、私は主に最初のオプションを使用します。ただし、2番目のものはよりきれいに見えます。読みやすく、保守しやすいものを選択してください。

于 2012-07-14T12:22:44.753 に答える
4

data-*サーバー側では、HTML要素のデータを属性に格納し、 jQueryの.data()関数を介して取得できます（ jQuery 1.4.3以降、ドキュメントに記載されているように、その関数の一般的な動作も変更されました）。プラグインで属性を設定していますが、その時点で、元の幅と高さを次のdataようにオブジェクトに保存できます。

$(this).data( "data-width", w );
$(this).data( "data-height", h );

この関数を使用すると、データがHTMLに属性として格納されているかどうか、または要素にアタッチされたjQueryのオブジェクトに含まれているかどう.data()かに関係なくデータが返されます。すでに引数なしで関数を使用しています。これは、一致した要素の完全なオブジェクトを、HTML属性およびjQueryのオブジェクトからのデータとともに返します。これは機能しますが、次のように呼び出すことで、保存することができます。data-data.data()datadatawidthheight

$(this).data("width");
$(this).data("height");
于 2012-07-14T12:26:39.183 に答える