スクリプト開発向けタグライブラリ

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（値を直接指定）
  • タグのvalue属性に直接文字列を指定します。
HTML
<imart type="imuiButton" value="ボタン" class="imui-medium-button" />

value（値を変数で指定）

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（値を直接指定）
  • label属性を使用して、buttonタグを出力します。
HTML
<imart type="imuiButton" label="ラベル" class="imui-medium-button" />

iconClass

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

imgPath

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（装飾）
  • 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" />

Copyright © 2012 NTT DATA INTRAMART CORPORATION