2.1.5 Button

Buttonは、ボタンを表示する部品です。ボタンには、テキストだけでなくイメージを表示することもできます。

表示例

記述形式

<div rcf:type="Button" ... >子要素</div>

ポイント

本部品は、前後に改行コードは挿入されません。
子要素には、ブロック要素またはインライン要素を指定できます。
ただし、以下のものは子要素に指定できません。
- <a>タグ
- <form>タグ
- <input>タグ
- <select>タグ
- <textarea>タグ
- <label>タグ
- <button>タグ
- <isindex>タグ
- <fieldset>タグ
- <iframe>タグ
- UI部品

記述例	表示例
<div rcf:type="Button"> Click! </div>
<div rcf:type="Button"> <font color="red"> Click! </font> </div>
<div rcf:type="Button"> <img src="calendar.png" /> </div>
<div rcf:type="Button"> <center> <img src="calendar.png" /><br/> click! </center> </div>

プロパティ

表の項目の意味は、「Text」の「プロパティ」を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
title	String	ツールチップで表示されるテキストを指定します。	可	""	値	可	不可
enabled	Boolean	本部品の有効/無効を指定します。 true:有効 false:無効操作できなくなりイベントも発生しません。	可	true	値、バインド	可	不可
tabIndex	Number	Tabキーで移動するフォーカスの順番を指定します。 HTMLのtabindex属性と同様の指定ができます。1以上の整数を指定した場合、数字の小さい順にフォーカスが移動します。 FocusManagerによるフォーカス移動には関係しません。	可	0	値	可	不可
label	String	ボタンに表示する文字列を指定します。このプロパティは、Button部品<div>タグの子要素として指定されたボタン表示内容を上書きします。setPropertyやバインディングにより、初期値("")以外の文字列に変更されたとき、Button部品<div>タグの子要素の内容を破棄し、この文字列に差し替えます。	可	""	値、バインド	可	不可

部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。

注意

titleプロパティに長い文字列を指定すると、自動的に改行または省略されることがあります。
また、発生位置はブラウザにより異なります。

なお、空文字列を指定した場合は、表示されません。

スタイルプロパティ

スタイルプロパティを以下に示します。

パーツ名	プレフィックス	クラス名	使用可能なスタイル
部品全体	なし	rcf-Button	カラーサイズテキスト(textIndent、textDecorationを除く) フォント(lineHeightを除く) ボーダーパディング verticalAlign

詳細は、「2.9 スタイルプロパティ」を参照してください。

注意

ボーダーに関する注意事項

ボーダーは、Internet ExplorerとFirefoxで、省略値が異なります。そのため、borderWidth、borderStyle、borderColorの一部だけを指定した場合、ブラウザによって表示が異なる場合があります。

whiteSpaceに関する注意事項

whiteSpaceは、Internet Explorer 9 標準、Internet Explorer 10 標準、Internet Explorer 11 標準、およびFirefoxで有効です。それ以外のブラウザでは、指定しても無視されます。

イベントリスナ

名前	説明	イベントオブジェクト
onFocus	部品がフォーカスを得たときに呼ばれます。	ActionEvent
onBlur	部品がフォーカスを失ったときに呼ばれます。	ActionEvent

部品共通のイベントリスナもあります。詳細は、「2.8.2 画面部品共通イベントリスナ」を参照してください。

イベント処理の記述例

ボタンがクリックされてclickイベントが発生したときの記述例を、以下に示します。

【処理概要】

clickイベントに対する処理の実行に、clickButton関数を指定します。
clickイベントが発生すると、clickButton関数が実行されます。
アラートが表示されます。

<script type="text/javascript">
//<![CDATA[
  function clickButton() {
    // ボタンがクリックされたときの処理
    alert("click button");
  }

  var eventMap = {
    
    button1: {
      click: clickButton
    }
  };
  
  RCF.addInitializedListener(function(eventObject) {
    rcf.event.EventRegistrar.registerEvents(eventMap, "eventMap");
  }); 

//]]>
</script>

  ...

<div rcf:id="button1" rcf:type="Button">
  <span>ボタン1</span>
</div>

  ...

JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。