
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
jQuery
2018.05.30
jQuery UI の button を利用すると、ラジオボタンやチェックボックスなど 色々な要素に対してボタンを生成することができます。
今回は、button の使用方法とアイコン付ボタンの表示方法について紹介します。
1.button を使用してボタンを生成
2.ボタンにアイコンを表示
3.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 の導入と使用方法をご参照下さい。
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 |
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.