機能説明

  • ボタンを作成します。
  • 以下の属性一覧のうち、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" />