jQuery UI の button を利用すると、ラジオボタンやチェックボックスなど 色々な要素に対してボタンを生成することができます。
今回は、button の使用方法とアイコン付ボタンの表示方法について、解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
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 の導入と使用方法をご参照下さい。
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>
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>
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 を使用してアイコンを表示する方法をご参照下さい。
上のサンプルでは オプション「 icons 」を設定しましたが、button には、他にも次のようなオプションがあります。
disabled | ボタンの無効化を指定 初期値:false |
---|---|
icons | ボタンにアイコンを表示するための指定 アイコンを 1 つ表示:icons:{primary:”アイコンのclass名”} アイコンを 2 つ表示:icons:{primary:”アイコンのclass名”, secondary:”アイコンのclass名”} |
label | ボタンに表示するテキストを指定 |
text | icons オプションを指定した場合に、ボタンにテキストを表示するか否かを指定 初期値:true |
jQuery UI の button について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.