【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

公開日: : 最終更新日:2014/08/28 JavaScript/jQuery, サイト制作

スポンサーリンク

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなものを探したところ一番良さそうなのがjQueryUIの「Spinner」でしたので試しに使ってみました。

設置する

jQueryUIの設定自体は省略します。Spinnerの設置自体はinputタグを用意してそのDOM(jQueryオブジェクト)のspinnerメソッドを呼ぶだけです。

JS側

$(function(){
	var spinner = $( "#spinner" ).spinner();
});

HTML側

<input id="spinner">

最大値・最小値・初期値の設定

このままではどんな値でも設定できてしまうので最大と最小値を設定します。ついでに初期値も設定します。

$(function(){
	var spinner = $( "#spinner" ).spinner(
	{
		max:31,
		min:1		
	});
	$( "#spinner" ).spinner( "value" , 31 );	
});

最大値・最小値はプロパティで設定することができます。「max」、「min」プロパティでそれぞれ最大と最小を設定し、オプション設定で「value」値に指定の初期値、この場合では31、を入れています。

他のプロパティにはクリックごとの上がり幅、下がり幅を決める「step」などがあります。詳細は本家ページのこちらをご覧ください。

値の取得

値はオプションの「value」値から取得できます。

var val = $( "#spinner" ).spinner( "value" );

イベント

イベントには上下ボタンのクリックにより値が変更されたときに呼ばれる「spin」イベントや外的要因から値が変更されたときに呼ばれる「change」イベント、初期化の際に呼ばれる「create」イベントなどがあります。(spinはchangeが呼ばれる状況では呼ばれない模様。その逆もその様子。)

例)

$(function(){
	var spinner = $( "#spinner" ).spinner(
	{
		max:31,
		min:1,
		change: function( event, ui ) {
			/*省略*/
		},
		spin: function( event, ui ) {
			/*省略*/
		},
		create: function( event, ui ) {
			/*省略*/
		}
	});
});

※ちなみに引数の「ui」で値を取得できるのは「spin」のみで「ui.value」で取得可能です。その他の場合は上記で述べたオプションの「value」の値から行ってください。

サイズの変更

CSSでSpinnerのサイズを変更します。

#spinner{
  width: 26px;
  height: 16px;
  font-size: 14px;
  line-height: 16px;
}

デモ



値⇒
change⇒
spin⇒

CSSも上記のものを指定しています。

ソース

JS側

$(function(){
	var spinner = $( "#spinner" ).spinner(
	{
		max:31,
		min:1,
		change: function( event, ui ) {
			$( "#change" ).html( $("#spinner").spinner( "value" ) );
		},
		spin: function( event, ui ) {
			$( "#spin" ).html( ui.value );
		},
		create: function( event, ui ) {
			$( "#spinner" ).spinner( "value" , 31 );
		}
	});
	
	//クリックイベントで値を取得
	$("#btn").click(function(){
		var val = $( "#spinner" ).spinner( "value" );
		$( "#spinnerdst" ).html( val );
	});	
});

HTML側

<input id="spinner">
<button id="btn">値取得</button>
値⇒<span id="spinnerdst"></span>
change⇒<span id="change"></span>
spin⇒<span id="spin"></span>

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑