2.1.5 Button

Ajaxフレームワーク UI部品リファレンス

目次索引

第2章画面部品

> 2.1 フォーム部品

2.1.5 Button

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

表示例
記述形式
プロパティ
スタイルプロパティ
イベントリスナ
JavaScript API

■表示例

■記述形式

<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"></img> </div>
<div rcf:type="Button"> <center> <img src="calendar.png"></img><br/> click! </center> </div>

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

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

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

titleプロパティに長い文字列を指定すると、以下のような現象が起こることがあります。

全角30文字(半角60文字)以上の場合、自動的に改行される場合があります。
改行は、全角文字または単語の区切りで行われます。
全角45文字(半角90文字)までが表示され、それ以上の文字は省略されます。

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

■スタイルプロパティ

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

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

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

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

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

whiteSpaceに関する注意事項

whiteSpaceは、Firefoxでだけ有効です。Internet Explorerでは、指定しても無視されます。

■イベントリスナ

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

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

イベント処理の記述例

ボタンが押されて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>

  ...

マウスイベントに関する注意事項

Internet Explorerでは、ボタンとそのボタンの内容の間に、ボタンをクリックできない部分があります。これは、通常のHTMLの<button>および<input type="button">の場合にもあります。

このクリックできない部分にマウスがある場合、以下の注意事項があります。

この部分でボタンをクリックしても、click、mouseup、mousedown、dblclickの各イベントは発生しません。
マウスをゆっくり動かした場合、この部分で、mouseoutおよびmouseoverイベントが発生する場合があります。

Internet Explorer 6の場合の表示例

クリックできる場合	クリックできない部分にマウスがある場合

■JavaScript API

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

目次索引