Gallery

以下の記事は、Tizen SDK Dev Guide にあるGallery の日本語訳です。

その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。

---

Gallery

ギャラリーウィジェットは画面にギャラリー内の画像を表示します。

アプリケーションにギャラリーのウィジェットを追加するには、次のコードを使用します。

<div data-role="gallery" id="gallery" data-vertical-align="middle" data-index="3">
   <img src="01.jpg">
   <img src="02.jpg">
   <img src="03.jpg">
   <img src="04.jpg">
   <img src="05.jpg">
   <img src="06.jpg">
   <img src="07.jpg">
   <img src="08.jpg">
</div>

画像スライダーオプションについて次の表で説明します。

オプション	入力タイプ	説明
data-index	数値	ギャラリー内の最初の画像のインデックス番号を設定します。 デフォルトの値は0です。
data-vertical-align	文字列	画像の位置を設定します。設定値はtop、middle、bottomから選択します。 デフォルトの値はtopです。

次のメソッドがギャラリーで使用できます。

• add

  addメソッドはギャラリーに画像を追加するために使用します。 image_file属性で画像ファイルのURLを指定します。

    <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
  
    $("#gallery").gallery('add', [image_file]);
  

• remove

  removeメソッドはギャラリーに画像を削除するために使用します。image_index属性で削除する画像ファイルのインデックス番号を指定します。

    <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
  
    $("#gallery").gallery('remove', [image_index]);
  

• refresh

  refreshメソッドはギャラリーを再読み込みするために使用します。画像のスライダーに画像を追加した後は、このメソッドを呼ばなければなりません。

    <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
  
    $("#gallery").gallery('refresh');
  

• empty

  emptyメソッドはギャラリーからすべてのイメージを取り除くために使用します。

    <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
  
    $("#gallery").gallery('empty');
  

• length

  lengthメソッドは、ギャラリー内のすべての画像の数を取得するために使用します。

    <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
  
    $("#gallery").gallery('length');
  

• value

  valueメソッドはギャラリーの現在のインデックスを取得または設定するために使用します。

    <div id="gallery" data-role="gallery" data-vertical-align="middle"></div>
  
    $("#gallery").gallery('value' [image_index]);
  

次に読むドキュメント

Web UI Frameworkリファレンス

---

日本語訳： yasuyk

http://www.softolet.com

This content is licensed under Creative Commons Attribution 3.0. For details, see the Content License.