Multimedia View
以下の記事は、Tizen SDK Dev Guide にあるMultimedia View の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
Multimedia View
マルチビューウィジェットは、マルチメディアコンテンツの表示および処理するために使用できるプレーヤーコントロールを表示します。このウィジェットは標準HTMLのvideo、audio要素を使用しています。
アプリケーションにマルチメディアビューウィジェットを追加するには、次のコードを使用します。
// Video player control
<video data-controls="true" style="width:100%;" data-theme="c">
<source src="<VIDEO_FILE_URL>" type="video/mp4" />
Your browser does not support the video tag.
</video>
// Audio player control
<audio data-controls="true" style="width:100%;">
<source src="<AUDIO_FILE_URL>" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>
マルチメディアビューウィジェットのオプションについて次の表で説明します。
| オプション | 入力タイプ | 説明 |
|---|---|---|
| data-control | 真偽値 | ウィジェットのコントロールを設定します。 デフォルト値はtrueです。値がtrueに設定されている場合は、ウィジェット自身のプレーヤコントロールを使用します。値がfalseに設定されている場合は、ウィジェットはブラウザのプレーヤーコントロールを使用します。 |
| data-full-screen | 真偽値 | fullscreenビューモードでウィジェットを開くかどうかを設定します。デフォルトの値は falseです。 |
| data-theme(optional) | 文字列 | ウィジェットのテーマを設定します。 値が設定されていない場合は、親コントロールのテーマを使用します。 |
マルチビューは、ウィジェットが作成されたときに起動するcreateイベントにコールバックを設定することができます。
$('.selector').multimediaview({
create: function(event, u){...}
});
$(".selector").bind("create", function(event, ui)
{
// Respond to the multimedia view widget creation
});
次のリストでマルチメディアビューが使用できるメソッドについて説明します。
width
マルチメディアビューの幅の取得(値が設定されていない場合)と設定に
widthメソッドが使えます。<video data-full-screen="true"> <source src="test.mp4" type="video/mp4" /> </video> $(".selector").multimediaview("width", [value]);height
マルチメディアビューの高さの取得(値が設定されていない場合)と設定に
heightメソッドが使えます。<video data-full-screen="true"> <source src="test.mp4" type="video/mp4" /> </video> $(".selector").multimediaview("height", [value]);fullscreen
マルチメディアビューの
fullscreenモードの取得(値が設定されていない場合)と設定にfullscreenメソッドが使えます。値がtrueの場合はfullscreenモードが有効になり、そうでなければnormalモードになります。<video data-full-screen="true"> <source src="test.mp4" type="video/mp4" /> </video> $(".selector").multimediaview("fullScreen", [value]);
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
List
以下の記事は、Tizen SDK Dev Guide にあるList の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
List
リストウィジェットは、例えば、ナビゲーションデータ、結果、およびデータエントリを表示するために使用されます。jQueryMobileのリストについてのドキュメントに説明されているとおりに、Tizenでリストを使用することができます。
| 注意 |
|---|
<a>タグに配置したボタンウィジェト(data-role="button")はリストウィジェトではサポートしていません。ボタンは<dev>タグに配置する必要があります。 |
アプリケーションにリストウィジェットを追加するには、次のコードを使用します。
- アンカー有りリスト
次のコードを使用して、アプリケーションにプレスイフェクトとアンカーがあるリストウィジェットを追加することができます。
<ul data-role="listview">
<li>
<a href="#">1line</a>
</li>
</ul>
- アンカー無しリスト
次のコードを使用して、アプリケーションにプレスイフェクトとアンカーのないリストウィジェットを追加することができます。
<ul data-role="listview">
<li>1line</li>
</ul>
<li>エレメントにクラス属性を使用して実装されている利用可能なリストスタイルを次の表（訳者注:本ページではリスト)で説明します。
基本的な1行のリスト項目
<li><a href="#">1line</a></li>サブテキスト付きの1行のリスト項目
<li><a href="#"> 1line-sub <span class="ui-li-text-sub">Subtext</span> </a></li>メインテキストの下にサブテキストがあるリスト項目。この属性が使用されていない場合、サブテキスト位置は、メインテキストの右隣になります。
<li class="ui-li-multiline">サムネイル付きリスト項目
<img src="a.jpg" class="ui-li-bigicon" />サムネイルが右にあるリスト項目
<li class="ui-li-thumbnail-right">テキストボタン(btn1)または円形ボタン(btn2)付きの1行リスト項目
<li><a href="#"> 1line-btn1 <div data-role="button" data-inline="true">Text Button</div> </a></li> <li><a href="#"> 1line-btn2 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div> </a></li>トグルスイッチ付きの1行リスト項目
<li><a href="#"> 1line-toggle <div data-role="toggleswitch" /></div> </a></li>サムネイル画像(bigicon1)、および必要に応じてサブテキスト(bigicon2)、テキストボタン(bigicon4)、円形ボタン(bigicon5)またはトグルスイッチ(bigicon6)が付いている1行のリスト項目
<li><a href="#"> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 1line-bigicon1 </a></li> <li><a href="#"> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 1line-bigicon5 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div> </a></li>チェックボックス(check1)、および必要に応じてサブテキスト(check2)、サムネイル(check3)または円形ボタンとサムネイル(check4)が付いている1行のリスト項目
<li><a href="#"> <form><input type="checkbox" name="c1line-check1" /></form> 1line-check1 </a></li> <li><a href="#"> <form><input type="checkbox" name="c1line-check4" /></form> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 1line-check4 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div> </a></li>ラジオボタン(radio1)、および必要に応じてサブテキスト(radio3)、サムネイル(radio4)、円形ボタンとサムネイル(radio5)が付いている1行のリスト項目
<li><a href="#"> <form><input type="radio" /></form> 1line-radio1 </a></li> <li><a href="#"> <form><input type="radio" /></form> 1line-radio5 <img src="thumbnail.jpg" class="ui-li-bigicon"> </a></li>
− 基本的な2行のリスト項目
<li class="ui-li-has-multiline"><a href="#">
2line
<span class="ui-li-text-sub">subtext</span>
</a></li>
サブテキスト付きの2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> 2line-2sub <span class="ui-li-text-sub">Subtext</span> <span class="ui-li-text-sub2">Subtext2</span> </a></li>テキスト(btn1)または円形ボタン(btn2)付きの2行リスト項目
<li class="ui-li-has-multiline"><a href="#"> 2line-btn1 <span class="ui-li-text-sub">Subtext</span> <div data-role="button" data-inline="true">button</div> </a></li> <li class="ui-li-has-multiline"><a href="#"> 2line-btn2 <span class="ui-li-text-sub">Subtext</span> <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> </a></li>最初のサブテキストに星形アイコンが右隣についた2行のサブテキスト(start1)、または1行のサブテキストと2つの星形アイコン(1つはサブテキストの左隣に、もう1つはサブテキストの右隣り)(start2)が付いている2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> 2line-star1 <span class="ui-li-text-sub">Subtext</span> <span style="position:absolute; right:16px; top:80px"> <img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png" /></span> <span class="ui-li-text-sub2">Subtext2</span> </a></li> <li class="ui-li-has-multiline"><a href="#"> 2line-star2 <span class="ui-li-text-sub"> <img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" />Subtext</span> <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png" /></span> </a></li>必要に応じてトグルスイッチや円形ボタンが付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> 2line-setting <span class="ui-li-text-sub">Subtext</span> </a></li> <li class="ui-li-has-multiline"><a href="#"> 2line-toggle-setting <span class="ui-li-text-sub">Subtext</span> <div data-role="toggleswitch"></div> </a></li> <li class="ui-li-has-multiline"><a href="#"> 2line-btn-setting <span class="ui-li-text-sub">Subtext</span> <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> </a></li>必要に応じて星形ボタンと円形ボタン(bigicon0)、サムネイル(bigicon1)、サムネイルと2つ目のサブテキスト(bigicon2)、サムネイルとサブテキスト(bigicon3)、サブテキスト、円形ボタン、サムネイル(bigicon4)およびサブテキストとサムネイルと星形ボタン(bigicon8)が付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> 2line-bigicon0 <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" /></span> <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> </a></li> <li class="ui-li-has-multiline"><a href="#"> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 2line-bigicon2 <span class="ui-li-text-sub">Subtext</span> <span class="ui-li-text-sub2">Subtext2</span> </a></li>サブテキストとチェックボックス(check1)、必要に応じて円形ボタン(check2)とサムネイル(check3)が付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> <form><input type="checkbox" name="c2line-check1" /></form> 2line-check1 <span class="ui-li-text-sub">subtext</span> </a></li> <li class="ui-li-has-multiline"><a href="#"> <form><input type="checkbox" name="c2line-check3" /></form> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 2line-check3 <span class="ui-li-text-sub">Subtext</span> </a></li>サブテキストとラジオボタン(radio1)、必要に応じてサムネイル(radio2)が付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> <form><input type="radio" /></form> 2line-radio1 <span class="ui-li-text-sub">Subtext</span> </a></li> <li class="ui-li-has-multiline"><a href="#"> <form><input type="radio" /></form> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 2line-radio2 <span class="ui-li-text-sub">Subtext</span> </a></li>カラーバー、サムネイル、テキストボタンと複数の星形アイコン(colorbar1)、カラーバー、サムネイル、テキストボタンと1つの星形アイコン(colorbar2)、カラーバー、星形アイコン、サブテキストとボタン(colorbar3)、カラーバー、サムネイル、サブテキストと円形ボタン(colorbar4)が付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> <span class="ui-li-color-bar"></span> 2line-colorbar1 <span class="ui-li-text-sub">subtext <img src="00_winset_icon_favorite_on.png" /> <img src="00_winset_icon_favorite_on.png" /> <img src="00_winset_icon_favorite_on.png" /></span> <div data-role="button" data-inline="true"></div> </a></li> <li class="ui-li-has-multiline"><a href="#"> <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span> 2line-colorbar2 <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" /></span> <span class="ui-li-text-sub">Subtext</span> <div data-role="button" data-inline="true">button</div> </a></li>サブテキストとサムネイル(thumb1)、必要に応じて2つの星形アイコン(thumb2)、1つの星形アイコンとサブテストとサムネイル(thumb3)が付いた2行のリスト項目
<li class="ui-li-has-multiline ui-li-thumbnail-right"><a href="#"> 2line-thumb1 <span class="ui-li-text-sub">Subtext</span> <img src="thumbnail.jpg" class="ui-li-bigicon"> </a></li> <li class="ui-li-has-multiline"><a href="#"> 2line-thumb2 <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" /></span> <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" />Subtext</span> <img src="thumbnail.jpg" class="ui-li-bigicon" /> </a></li>メインテキストとサムネイルの前サブテキストがある2行のリスト項目
<li class="ui-li-has-multiline ui-li-thumbnail-right"><a href="#"> <span class="ui-li-text-sub">Subtext</span> 2line-sub-main-bigicon1 <img src="thumbnail.jpg" class="ui-li-bigicon" /> </a></li>サムネイルとプログレスバーが付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> <image scr="thumbnail.jpg" class="ui-li-bigicon"> 2line-bigicon-pgbar1 <span class="ui-li-text-sub">Subtext</span> <div data-role="progressbar" id="progressbar"></div> </a></li>チェックボックスとサムネイル、サブテキストと円形ボタンが付いた2行のリスト項目
<li class="ui-li-has-multiline"><a href="#"> <form><input type="checkbox" name="c2line-icon-bigicon-btn" /></form> <img src="thumbnail.jpg" class="ui-li-bigicon" /> 2line-icon-bigicon-btn <span class="ui-li-text-sub">Subtext</span> <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> </a></li>
jQueryMobileのリストイベントについてのドキュメントに説明されている方法でイベントのコールバックをリストに設定することができます。
jQueryMobileのリストのメソッドについてのドキュメントに説明されているとおりにリストのメソッドを使用することができます。
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
List Divider
以下の記事は、Tizen SDK Dev Guide にあるList Divider の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
List Divider
リストデバイダウィジェットはグループにしたリストの区切りとして使用します。jQueryMobileのリストデバイダについてのドキュメントに説明されているとおりに、Tizenでリストデバイダを使用することができます。
<li data-role="list-divider" data-style="check">
<form><input type="checkbox" name="c2line-check1" /></form></li>
| 注意 |
|---|
| リストデバイダウィジェットはTizen2.0以降でサポートされています。 |
リストデバイダのオプションを次の表で説明します。
| オプション | 入力タイプ | 説明 |
|---|---|---|
| data-style | 文字列 | リストデバイダのスタイルを設定します。値はdialogue、check、checkexpandableのどれかになります。 |
jQueryMobileのリストイベントについてのドキュメントに説明されている方法でイベントのコールバックをリストデバイダに設定することができます。
jQueryMobileのリストのメソッドについてのドキュメントに説明されているとおりにリストデバイダのメソッドを使用することができます。
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
HTML Block
以下の記事は、Tizen SDK Dev Guide にあるHTML Block の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
HTML Block
HTMLブロックウィジェットはカスタムHTMLウィジェットとしてを扱います。ウィジェットを使用して、任意のHTMLコマンドを挿入することができます。
アプリケーションにHTMLブロックのウィジェットを追加するには、次のコードを使用します。
<div id="htmlblock1">
<!--HtmlCodeBlock-Start[#htmlblock1-->
User Codes...
<!--HtmlCodeBlock-End[#htmlblock1-->
</div>
HTML ブロック
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
Header and Footer
以下の記事は、Tizen SDK Dev Guide にあるHeader and Footer の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
Header and Footer
ヘッダとフッタウィジェットはページにデフォルトバーを設定するために使用します。ほとんどのオプションがページ内に定義されているので、ヘッダとフッタはページウィジェッドと密接に結びついています。ヘッダとフッタのウィジェットスタイルは、ページのHTMLマークアップで設定します。
| 注意 |
|---|
デフォルトボタンのスタイル(data-role="button")はヘッダでサポートされていません。ボタンに<a>タグをを追加する必要があります。 |
アプリケーションにヘッダウィジェットを追加するには、次のコードを使用します。
<div id="foo" data-role="header" data-position="fixed">
<h1>NBeat UI</h1>
<a>Button 1</a>
</div>
$("#foo").barlayout('show');
次のリストでヘッダスタイルを説明します。
1個のボタンがついたタイトル
<div data-role="header" data-position="fixed"> <h1>NBeat UI</h1> <a>Button</a> </div> <table border="1" id="controls">2個のボタンがついたタイトル
<div data-role="header" data-position="fixed"> <h1>NBeat UI</h1> <a>Button 1</a> <a>Button 2</a> </div>1個のボタンとアイコンがついたタイトル
<div data-role="header" data-position="fixed"> <img src="icon-tizen.png" /> <h1>Icon Title</h1> <a>text1</a> </div>タイトルとサブテキスト(複数行)
<div data-role="header" data-position="fixed"> <h1>Title Text multiline</h1> <span class="ui-title-text-sub">tizen@samsung.com</span> </div>タイトルとサブテキストとアイコン(複数行)
<div data-role="header" data-position="fixed"> <img src="icon-tizen.png"/> <h1>Title demo</h1> <span class="ui-title-text-sub">Title image multiline 2 Buttons</span> <a data-icon="naviframe-more"></a> <a data-icon="naviframe-edit"></a> </div>
jQueryMobileのイベントについてのドキュメントに説明されている方法でイベントのコールバックをヘッダとフッタに設定することができます。
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
Handler
以下の記事は、Tizen SDK Dev Guide にあるHandler の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
Handler
ハンドラウィジェットによって、垂直固定サイズのハンドルを使用してページまたはパネルをスクロールすることができます。ウィジェットはスクロールするウィンドウの位置を示し、ページまたはパネルのスクロールサイズが画面サイズより大きい場合にのみ画面上に表示されます。
アプリケーションにハンドラウィジェットを追加するには、次のコードを使用します。
<div data-role="content" data-scroll="y" data-handler="true">
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="#">Adam Kinkaid</a></li>
...
</ul>
</div>
ハンドラーオプションについて次の表で説明します。
| オプション | 入力タイプ | 説明 |
|---|---|---|
| data-handler | 真偽値 | ハンドラウィジェットを有効にします。この値はtrueにしなくてはなりません。 |
| data-handler-theme (optional) |
文字列 | ハンドラウィジェットのテーマを設定します。 |
使用有無を取得するため(引数に値が設定されていなければ)、または使用有無を設定するためにenableHandlerメソッドを使用することができます。[enable]にtrueを設定するとハンドラは有効になり、それ以外を設定するとはハンドラは無効になります。
$("#.selector").scrollview("enableHandler", [enable]);
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
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です。 |
次のメソッドがギャラリーで使用できます。
addaddメソッドはギャラリーに画像を追加するために使用します。image_file属性で画像ファイルのURLを指定します。<div id="gallery" data-role="gallery" data-vertical-align="middle"></div> $("#gallery").gallery('add', [image_file]);removeremoveメソッドはギャラリーに画像を削除するために使用します。image_index属性で削除する画像ファイルのインデックス番号を指定します。<div id="gallery" data-role="gallery" data-vertical-align="middle"></div> $("#gallery").gallery('remove', [image_index]);refreshrefreshメソッドはギャラリーを再読み込みするために使用します。画像のスライダーに画像を追加した後は、このメソッドを呼ばなければなりません。<div id="gallery" data-role="gallery" data-vertical-align="middle"></div> $("#gallery").gallery('refresh');emptyemptyメソッドはギャラリーからすべてのイメージを取り除くために使用します。<div id="gallery" data-role="gallery" data-vertical-align="middle"></div> $("#gallery").gallery('empty');lengthlengthメソッドは、ギャラリー内のすべての画像の数を取得するために使用します。<div id="gallery" data-role="gallery" data-vertical-align="middle"></div> $("#gallery").gallery('length');valuevalueメソッドはギャラリーの現在のインデックスを取得または設定するために使用します。<div id="gallery" data-role="gallery" data-vertical-align="middle"></div> $("#gallery").gallery('value' [image_index]);
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
