見出し画像

Velo 第31回 リピーターコンテナとコンテナボックス

Wix のコンテナには何種類かあるようです。
同じエディタで追加したエレメントでもリピーターに付属するコンテナはエレメント名が「コンテナ」で、コンテナボックスに付属するコンテナはエレメント名が「ボックス」です。
どちらも ContainableMixin という Mixin が装備されていて、エレメント上のオブジェクトを children とする親子関係を持っていますが、機能は違うようです。
以下のアニメーションをご覧下さい。

コンテナによる効果の違い

左のアニメーションはリピーターコンテナ上の画像を拡大していますが、拡大時にコンテナ外の部分はトリミングされています。
しかし右側のコンテナボックス上の画像の方はトリミングされません。
また、リピーター内のコンテナも表示されるエレメント名を見る限り、通常エディター、エディターX、Wixスタジオでそれぞれ違っているようです。

さて、上のアニメーションはマウスイベントハンドラーとしてコーディングしています。
以下のコードをご覧下さい。

2つのアニメーションコード

リピーターとボックスではコードが違っています。
第17回で示しましたようにリピーターコンテナでは、 at( ) 関数でリピーター内のローカルセレクター $item( )獲得し、それを使って画像IDで個々の画像を特定しています。
リピータと言いながら一つの枠しか利用していませんが理屈上こういうコードになります。
一方コンテナボックスの方はグローバルセレクター $w( ) を使って画像IDで画像を特定しています。難しいものです。

Velo開発のご依頼はこちら


この記事が気に入ったらサポートをしてみませんか?