【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
  • このエントリーをはてなブックマークに追加

関連記事

application-javascript

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

source_php

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

jquery-icon

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

wwwimage

お名前.comのでサブドメインを取得してロリポップで使う方法

タイトルどおりなのですがお名前.comで取得した独自ドメインからサブドメインを取得し、ロリポップで使

記事を読む

sliderimage

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

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

記事を読む

YKO85_monitamiruzangyouOL20131019500-thumb-500xauto-4534

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

nc23924

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

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

記事を読む

git_fetch

【TortoiseGit】複数のリポジトリを統合する

やりたいこと 最近WindowsにTortoiseGitを導入してリポジトリを作ったり、履歴をプッ

記事を読む

nc23924

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

a8selfback1

なるべく安くロリポップを申し込む方法

ロリポップというレンタルサーバーは元々比較的安く、よくキャンペーンなどで割引をやっているので安価にC

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

_rtm0919_tp_v
スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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