jQuery UI の spinner を利用すると、簡単にスピナー(数値を増減させるための上下ボタン)を作成することができます。
今回は、spinner の使用方法について、解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
jQuery UI の spinner を使用して スピナーを作成します。
上下ボタン(▲▼)をクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<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(){
$("#wkSpinner").spinner();
});
</script>
<div style="background-color:#CCC; padding:20px;">
<input id="wkSpinner">
</div>
input 要素を指定して spinner を呼び出すだけで、数値を 1 ずつ増減して 入力欄に表示するスピナーを作成することができます。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
jQuery UI の spinner を使用して、緯度と経度で位置を指定して地図と連動させるようなシステムを作成することもできます。
上下ボタン(▲▼)をクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<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 src="http://maps.google.com/maps/api/js?key=XXXX"></script>
<script type="text/javascript">
$(function(){
function getPosition() {
return new google.maps.LatLng($("#wkIdo").val(), $("#wkKdo").val());
}
function setPosition() {
map.setCenter(getPosition());
}
$("#wkIdo, #wkKdo").spinner({
step:0.1,
change:setPosition,
stop:setPosition
});
let map = new google.maps.Map($("#wkMap")[0], {
zoom:10,
center:getPosition(),
mapTypeId:google.maps.MapTypeId.ROADMAP
});
});
</script>
<div style="background-color:#CCC; width:100%; padding:20px;">
<div style="display:inline-flex; align-items:center;">緯度<input id="wkIdo" value="35.7"></div>
<div style="display:inline-flex; align-items:center;">経度<input id="wkKdo" value="139.8"></div>
<div id="wkMap" style="width:100%; height:300px;"></div>
</div>
「<script src=”http://maps.google.com/maps/api/js?key=XXXX”></script>」としてグーグルマップを読み込んでいます。
「XXXX」の部分にAPIキーを指定する必要がありますので、Google Maps APIで「キーの取得」をクリックしてAPIキーを取得してご指定して下さい。
上の地図サンプルでは オプション「 step 」を設定しましたが、spinner には、以下のようなオプションがあります。
culture | 値を解析するためのフォーマット形式(日本は「ja-JP」)を指定 null:現在設定されている形式を採用 別途 numberFormat オプションが設定されている場合は、ファイルの読み込みが必要 初期値:null |
---|---|
disabled | スピナーの無効化を指定 初期値:false |
icons | 上下ボタン用のアイコンを jQuery UI CSS Framework に定義されているアイコンのクラス名で指定 初期値:{上:”ui-icon-triangle-1-n”、下:”ui-icon-triangle-1-s”} |
incremental | ボタンをクリックした時のステップ数の制御を指定 true:増減の操作をし続けると増減のステップ数がそれに応じて変化 false:増減のステップ数は常に一定 function():発生したスピンの数を取得し、現在のスピンによって増減するステップ数を返す 初期値:true |
max | 最大値を指定 初期値:null |
min | 最小値を指定 初期値:null |
numberFormat | グルーバル情報によって渡される数値フォーマットを指定 “n”:数値 “d”:10進数 “p”:パーセント “C”:通貨 初期値:null |
page | pageUp メソッド 又は pageDown メソッドを実行する際に、ステップをどれだけ進めるかを指定 初期値:10 |
step | ステップの数を指定 初期値:1 |
jQuery UI のspinner について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.