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.
