2013-05-17

Tabbar

Dev Guide

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

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

Tabbar

Tabbarウィジェットは、ボタンの順不同リストを表示します。一つのグループにまとめて、ヘッダやフッダに配置します。

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

<div data-role="tabbar">
   <ul>
      <li><a data-icon="edit">Tabbar1</a></li>
      <li><a data-icon="cancel">Tabbar2</a></li>
      <li><a data-icon="call">Tabbar3</a></li>
   </ul>
</div>

Swipeオプションについて次の表で説明します。

オプション	入力タイプ	説明
data-icon	<ICON_NAME>	各タブバーボタンのアイコンを設定します。

次のリストでtabbarsで使用できるメソッドについて説明します。

enable

Tabbarにあるボタンを有効するには、enableメソッドを使用します。

$("#foo").tabbar('enable', list_index);
disable

Tabbarにあるボタンを有効するには、disableメソッドを使用します。

$("#foo").tabbar('disable', list_index);

次に読むドキュメント

ウィジェットリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

2013-05-16

Slider

Dev Guide

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

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

Slider

Sliderウィジェットは、水平の目盛りのハンドルをドラッグして値を変更できる画面上のコントロールを表示します。jQueryMobileのSliderについてのマニュアルに記載されているようにTizenでSliderを使用することができます。

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

<input data-popup='false' type="range" name="slider" value="5" min="0"
max="10" data-icon="text" data-text-left="Min" data-text-right="Max" />

Sliderオプションについて次の表で説明します。

オプション	入力タイプ	説明
data-icon	文字列	スライダ両端のアイコンのスタイルを定義します。オプションの値は`bright`、`volume`、`text`のどれかになります。デフォルトの値は`text`です。
data-popup	真偽値	ハンドルをドラッグしている間の現在の値を示すポップアップを有効または無効にします。デフォルト値は`true`です。
data-text-left	文字列	スライダの左側に表示されるテキストを設定します。 `data-icon`オプションを`text`に設定する必要があります。
data-text-right	文字列	スライダの右側に表示されるテキストを設定します。 `data-icon`オプションを`text`に設定する必要があります。

jQueryMobileのSliderのイベントについてのドキュメントに説明されている方法でイベントのコールバックをSliderに設定することができます。

jQueryMobileのSliderのメソッドについてのドキュメントに説明されているとおりにSliderのメソッドを使用することができます。

次に読むドキュメント

ウィジェットリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

2013-05-02

Search Filter Bar

Dev Guide

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

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

Search Filter Bar

Search Filter Barウィジェットは、ページのコンテンツを検索するために使用します。このウィジェットは、ヘッダまたはページコンテンツに配置することができます。

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

<label for="search-basic">Search Input:</label>
<input type="search" name="search" id="searc-basic" value="" data-mini="true" />

jQueryMobileのSearch Barのオプションについてのドキュメントに説明されている多くのSearch BarオプションをTizenはサポートしています。

jQueryMobileのSearch Barのイベントについてのドキュメントに説明されている方法でイベントのコールバックをSearch Filter Bar設定することができます。

jQueryMobileのSearch Barのメソッドについてのドキュメントに説明されているとおりにSearch Filter Barのメソッドを使用することができます。

次に読むドキュメント

Web UI Frameworkリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

2013-05-02

Progress Bar

Dev Guide

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

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

Progress Bar

Progress Barウィジェットの継続操作の進行状況の割合を示すコントロールを表示します。このウィジェットは、親コンテナ内に収まるように拡大/縮小することができます。

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

<div id="foo" data-role="progressbar"</div>

Progress Barウィジェットは進捗値が変更されたときに起動される変更イベントのコールバックを定義することができます。

    <div id="foo" data-role="progressbar"></div>

    $("#foo").bind("change", function (ev, val)
    {
       Console.log("Value is changed to " + val);
    });

valueメソッドは現在のデフォルトのProgress Barの値の設定または取得するために使用します。

<div id="foo" data-role="progressbar"></div>

var oldVal = $("#foo").progress("option", "value");
$("#foo").progress("option", "value", 50);

次に読むドキュメント

Web UI Frameworkリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

2013-05-02

Progress

Dev Guide

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

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

Progress

Progressウィジェットは、操作が進行中であることを表示します。

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

<div data-role="progress" data-style="circle"></div>

次の表でProgressのオプションを説明します。

オプション	入力タイプ	説明
data-style	文字列	Progressウィジェットのタイプを設定します。値は`pending`(pending プログレススタイル)、`circle`(circle プログレススタイル)のどちらかになります。

Progressウィジェットは進捗値が変更されたときに起動される変更イベントのコールバックを定義することができます。

<div id="foo" data-role="progress"></div>

$("#foo").bind("change", function(ev, val)
{
   Console.log("Value is changed to " + val);
});

次のリストでProgressウィジェットが使用できるメソッドについて説明します。

value

valueメソッドは現在のデフォルトのProgressウィジェット値の設定または取得するために使用します。

  <div id="foo" data-role="progress"></div>

  var oldVal = $("#foo").progress("option", "value");
  $("#foo").progress("option", "value", 50);

running

runningメソッドはpendingまたはcircleのProgressウィジェットの現在の実行状態を設定したり、取得するために使用します。

  <div id="foo" data-role="progress" data-style="pending"></div>

  var currentRunning = $("#foo").progress("option", "running");
  $("#foo").progress("option", "running", true);

次に読むドキュメント

Web UI Frameworkリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

2013-05-01

Popup

Dev Guide

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

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

Popup

ポップアップウィジェットは、画面の中央にリストのポップアップウィンドウを表示します。自動的に画面内にポップアップウィンドウのサイズを最適化します。

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

<a href="#center_info" data-inline="true" data-rel="popup" data-position-to="window">Popup</a>

// Basic pop-up
<div id="center_info" data-role="popup" data-style="center_info">
   <div data-role="text">
      <p>
         Pop-up dialog box, a child window that blocks user interaction in the parent window
      </p>
   </div>
</div>

// Pop-up with a title and button
<div id="center_title_1btn" data-role="popup" data-style="center_title_1btn">
   <p data-role="title">
      Pop-up title
   </p>
   <p data-role="text">
      Pop-up dialog box
   </p>
   <div data-role="button-bg">
      <input type="button" value="Text Button" />
   </div>
</div>

次の表でポップアップのオプションを説明します。

オプション	入力タイプ	説明
data-style	文字列	ポップアップウィンドウのスタイルを設定します。次のスタイルが利用できます。 center_info: 基本的なポップアップメッセージ center_title: タイトル付きポップアップメッセージ center_basic_1btn: 1個のボタン付きポップアップメッセージ center_basic_2btn: 横並びの2個のボタン付きポップアップメッセージ center_title_1btn: タイトルと1個のボタン付きポップアップメッセージ center_title_2btn: タイトルと横並びの2個のボタン付きポップアップメッセージ center_title_3btn: タイトルと横並びの3個のボタン付きポップアップメッセージ center_button_vertical: 縦並びのボタン付きポップアップメッセージ center_checkbox: チェックボックス付きポップアップメッセージ center_liststyle_1btn: リストと1個のボタン付きポップアップメッセージ center_liststyle_2btn: リストと2個のボタン付きポップアップメッセージ center_liststyle_3btn: リストと3個のボタン付きポップアップメッセージ

オプション

入力タイプ

説明

data-style

文字列

ポップアップウィンドウのスタイルを設定します。

次のスタイルが利用できます。

center_info: 基本的なポップアップメッセージ
center_title: タイトル付きポップアップメッセージ
center_basic_1btn: 1個のボタン付きポップアップメッセージ
center_basic_2btn: 横並びの2個のボタン付きポップアップメッセージ
center_title_1btn: タイトルと1個のボタン付きポップアップメッセージ
center_title_2btn: タイトルと横並びの2個のボタン付きポップアップメッセージ
center_title_3btn: タイトルと横並びの3個のボタン付きポップアップメッセージ
center_button_vertical: 縦並びのボタン付きポップアップメッセージ
center_checkbox: チェックボックス付きポップアップメッセージ
center_liststyle_1btn: リストと1個のボタン付きポップアップメッセージ
center_liststyle_2btn: リストと2個のボタン付きポップアップメッセージ
center_liststyle_3btn: リストと3個のボタン付きポップアップメッセージ

jQueryMobileのポップアップのイベントについてのドキュメントに説明されている方法でイベントのコールバックをポップアップに設定することができます。

jQueryMobileのポップアップのメソッドについてのドキュメントに説明されているとおりにポップアップのメソッドを使用することができます。

次に読むドキュメント

Web UI Frameworkリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

2013-05-01

Notification

Dev Guide

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

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

Notification

Notificationウィジェットは通知機能を提供して画面上にポップアップウィンドウを表示します。

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

<div data-role="page">
   <div data-role="notification" data-type="tickernoti">
      <p>text1</p>
      <p>text2</p>
   </div>
   <div data-role="header"></div>
   <div data-role="content"></div>
   <div data-role="footer"></div>
</div>

<script type="text/javascript">
$('#notification-demo').bind('tapped', function (e, m)
{
   // Notification is tapped with parameter m
});
</script>

次の表でNotificationのオプションを説明します。

オプション	入力タイプ	説明
data-type	文字列	Notificationのタイプを設定します。値は`tickernoti`、`smallpopup`のどちらかになります。デフォルトの値は`smallpopup`です。

次のリストでNotificationが使用できるメソッドについて説明します。

open

Notificationウィジェトを表示するにはopenメソッドを使用します。

  <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>

  $('#notification').notification('open');

Notificationウィジェトを非表示にするにはcloseメソッドを使用します。

  <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>

  $('#notification').notification('close');

text

Notificationの文字を取得、設定するにはtextメソッドを使用します。

  <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>

  // Set notification text
  $('#notification').notification('text', 'setThisText');

  // Get notification text
  texts = $('#notification').notification('text');

注意
NotificationウィジェットはTizen2.0以降でサポートされています。

icon

iconメソッドはティッカーNotificationアイコンを設定するために使用します。

Notificationタイプがtickernotiのときのみiconは設定することができます。
```
  <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>

  $('#notification').notification('icon', './test.png');
```

次に読むドキュメント

Web UI Frameworkリファレンス

日本語訳： yasuyk

http://www.softolet.com

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

TIZENアプリ開発研究ブログ興味しんしんドリーム

このブログはTIZENアプリ開発情報を実践して情報を共有する為のブログです。

Tabbar

Tabbar

次に読むドキュメント

Slider

Slider

次に読むドキュメント

Search Filter Bar

Search Filter Bar

次に読むドキュメント

Progress Bar

Progress Bar

次に読むドキュメント

Progress

Progress

次に読むドキュメント

Popup

Popup

次に読むドキュメント

Notification

Notification

次に読むドキュメント