imuiButton
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.0 |
バージョン | 8.0.8 |
機能説明
- ボタンを作成します。
- 以下の属性一覧のうち、label, iconClass, imgPath のいずれかの属性を指定した場合、button タグを出力します。それ以外の場合、input タグを出力します。
- ボタン内にボタンよりも大きいサイズの画像を表示した場合、画像が切れて表示されます。
属性一覧
- 以下に記述する以外にも
<input type="button"/>
,<button/>
と同じ属性が利用できます。
注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
---|---|---|---|---|
HTML5
Boolean属性
|
autofocus |
boolean | 画面表示時に、ボタンにフォーカスをあてます | false |
Boolean属性 | disabled |
boolean | ボタンを無効化します | false |
HTML5
Boolean属性
|
hidden |
boolean | ボタンを非表示にします | false |
無害化 | iconClass |
string | ボタンに表示するCSSスプライトクラス名です 本属性を指定した場合、inputタグではなくbuttonタグが出力されます iconClass属性とimgPath属性が共に指定された場合、imgPath属性が優先されます 本属性は Ver.8.0.6 以降のバージョンで使用可能です |
- |
id |
string | ボタンのidです | 代替idを付与 | |
無害化 | imgPath |
string | ボタンに表示する画像のURLです 本属性を指定した場合、inputタグではなくbuttonタグが出力されます iconClass属性とimgPath属性が共に指定された場合、imgPath属性が優先されます 本属性は Ver.8.0.6 以降のバージョンで使用可能です |
- |
国際化 | label |
string | ボタン表示名です 本属性を指定した場合、inputタグではなくbuttonタグが出力されます 本属性は Ver.8.0.6 以降のバージョンで使用可能です |
- |
name |
string | ボタンのnameです | 代替nameを付与 | |
国際化 無害化 | value |
string | ボタン表示名です | - |
無害化 | その他 |
string | ユーザ定義属性です | - |
サンプル
value(値を直接指定)

- タグのvalue属性に直接文字列を指定します。
HTML
<imart type="imuiButton" value="ボタン" class="imui-medium-button" />
value(値を変数で指定)

- サーバサイドJavaScriptで宣言した変数を、タグのvalue属性に指定します。
サーバサイド JavaScript
var sampleButton = 'ボタン';
HTML
<imart type="imuiButton" value=sampleButton class="imui-medium-button" />
イベントを指定(onClick属性)
- onClick属性を使用して、クリックイベントを実行します。
HTML
<imart type="imuiButton" value="ボタン" class="imui-medium-button" onClick="sampleFunction()" /> <script type="text/javascript"> function sampleFunction(obj) { alert('sample'); } </script>
イベントを指定(jQuery)
- jQueryのbindメソッドを使用して、クリックイベントを実行します。
HTML
<imart type="imuiButton" id="sampleId" value="ボタン" class="imui-medium-button" /> <script type="text/javascript"> $(function() { $('#sampleId').bind('click', function(){ alert('sample'); }); }); </script>
label(値を直接指定)

- label属性を使用して、buttonタグを出力します。
HTML
<imart type="imuiButton" label="ラベル" class="imui-medium-button" />
iconClass

- iconClass属性を使用することで、画像付きbuttonタグとして出力できます。
HTML
<imart type="imuiButton" label="ラベル" class="imui-medium-button" iconClass="im-ui-icon-common-16-document-repetition" />
imgPath

- imgPath属性を使用することで、画像付きbuttonタグとして出力できます。
HTML
<imart type="imuiButton" label="ラベル" class="imui-medium-button" imgPath="ui/images/icons/fugue-icons-3.3.4/icons/document.png" />
label(装飾)

- label属性を使用することで、表示するボタンのラベルを装飾することができます。
サーバサイド JavaScript
var sampleLabel = '<u>ラベル</u><span class="im-ui-icon-common-16-document-repetition"></span>'
HTML
<imart type="imuiButton" label=sampleLabel class="imui-medium-button" />