jQuery【 jQuery UI 】button を使用してボタンを生成する方法

colmun_main10344

jQuery UI の button を利用すると、ラジオボタンやチェックボックスなど 色々な要素に対してボタンを生成することができます。
今回は、button の使用方法とアイコン付ボタンの表示方法について紹介します。

目次

 
1.button を使用してボタンを生成
2.ボタンにアイコンを表示
3.button のオプション

1.button を使用してボタンを生成

 

input type=”button”

jQuery UI の button を使用して ボタンを生成すると、次のように表示されます。

 
 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
<!--
$(function() {
  $("input[type='button']").button();
});
//-->
</script>

<div style="background-color:#CCC; display:inline-flex; padding : 10px;">
  <input type="button" value="Button1"> 
  <input type="button" value="Button2"> 
  <input type="button" value="Button3">
</div>

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
 

input type=”checkbox”

jQuery UI の button を使用して チェックボックスを生成すると、次のように表示されます。

 
 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
<!--
$(function() {
  $(".wkCheckBox").buttonset();
});
//-->
</script>

<div class="wkCheckBox" style="background-color:#CCC; display:inline-flex; padding : 20px;">
  <input id="cb1" type="checkbox"><label for="cb1">Check1</label> 
  <input id="cb2" type="checkbox"><label for="cb2">Check2</label> 
  <input id="cb3" type="checkbox"><label for="cb3">Check3</label>
</div>

 

input type=”radio”

jQuery UI の button を使用して ラジオボタンを生成すると、次のように表示されます。

 
 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
<!--
$(function() {
  $(".wkRadio").buttonset();
});
//-->
</script>

<div class="wkRadio" style="background-color:#CCC; display:inline-flex; padding : 20px;">
  <input id="rd1" type="radio" name="rd"><label for="rd1">Radio1</label> 
  <input id="rd2" type="radio" name="rd"><label for="rd2">Radio2</label> 
  <input id="rd3" type="radio" name="rd"><label for="rd3">Radio3</label>
</div>

▲目次へ戻る

 

2.ボタンにアイコンを表示

 
jQuery UI を使用して、ボタンにアイコンを表示させることもできます。

 

 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
<!--
$(function() {
  $("#wkBtn1").button({
    icons:{
      primary:"ui-icon-home"
    }
  });
  $("#wkBtn2").button({
    icons:{
      primary:"ui-icon-key"
    }
  });
  $("#wkBtn3").button({
    icons:{
      primary:"ui-icon-suitcase"
    }
  });
});
//-->
</script>

<div style="background-color:#CCC; display:inline-flex; padding : 20px;">
  <div><button id="wkBtn1">家</button></div> 
  <div><button id="wkBtn2">鍵</button></div> 
  <div><button id="wkBtn3">鞄</button></div>
</div>

jQuery UI のアイコンの種類等についてはjQuery【 jQuery UI 】icon を使用してアイコンを表示する方法をご参照下さい。

▲目次へ戻る

 

3.button のオプション

 
上のサンプルでは オプション「 icons 」を設定しましたが、button には、他にも次のようなオプションがあります。

disabled ボタンの無効化を指定
初期値:false
icons ボタンにアイコンを表示するための指定
アイコンを 1 つ表示:icons:{primary:”アイコンのclass名”}
アイコンを 2 つ表示:icons:{primary:”アイコンのclass名”, secondary:”アイコンのclass名”}
label ボタンに表示するテキストを指定
text icons オプションを指定した場合に、ボタンにテキストを表示するか否かを指定
初期値:true

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です