Google がホスティングしている jQuery を使用して、jQuery UI の Spinner のボタン部分だけを使う方法

Hosted Libraries( Google ) は、有名な JavaScript のライブラリの各バージョンをホスティングしてくれているので、いつでもどこでも好きな時に利用する事ができます。

以下は直訳ですが、Google の翻訳です。
Googleのホストされているライブラリは安定した、信頼性の高い、高速、JavaScriptのライブラリで最も人気のある、オープンソースのグローバル使用可能なコンテンツ配信ネットワークです。Googleは、各ライブラリの努力のための主要な利害関係者と直接連携し、それらがリリースされる最新バージョンを使用できます。


jQuery の場合便利なのは、CSS も同時に用意してくれているところです。以下でも利用(black-tie)していますが、テーマのタイプもそこにあれば使えるので試してみるといいと思います。

※ Spinner は、押し続けても使えるのでとても便利なコントロールです

以下は実際の記事上でのデモ実行

▼ この下に、Spinner 用の テキストフィールドがありますが非表示にしています
y
Spinner は通常では上のように縦になります

▼ この下の Spinner 用のフィールドは SPAN 要素で挟んでいます
x
SPAN 要素に対して回転する CSS を適用して横表示にしています

x y
x y

以下は記事内にある実際のソースコードです

<script>
// jQuery が無い場合は、Google がホスティングしているライブラリをロードする
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
		}
		// *************************************
		// 古い IE に気を使う
		// *************************************
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
// jQuery UI が無い場合は、Google がホスティングしているライブラリをロードする
if ( !jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/black-tie/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js\"></"+"script>");
}
</script>
<script>
// *************************************
// jQuery の ページロード時の処理
// *************************************
$(function(){
	$( "#spinner1" ).spinner({
		spin: function( event, ui ) {
			// *************************************
			// $(this).val() は、変化する前の値
			// ui.value は変化した後の値
			// *************************************
			var val = $(this).val()-ui.value;
			// ▲ をクリックするか押し続けると処理されます
			if ( val < 0 ) {
				$( ".y" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットしてマイナス1
					$(this).val( (parseInt($(this).val())||0)-1 );
				});
			}
			// ▼ をクリックするか押し続けると処理されます
			else {
				$( ".y" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットしてプラス1
					$(this).val( (parseInt($(this).val())||0)+1 );
				});
			}
		}
	})
	// 入力部分を使わないので、最小のサイズにして、高さをセット
	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })
	.show();

	$( "#spinner2" ).spinner({
		spin: function( event, ui ) {
			var val = $(this).val()-ui.value;
			// ▲ をクリックするか押し続けると処理されます
			if ( val < 0 ) {
				$( ".x" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットする
					$(this).val( (parseInt($(this).val())||0)+1 );
				});

			}
			// ▼ をクリックするか押し続けると処理されます
			else {
				$( ".x" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットする
					$(this).val( (parseInt($(this).val())||0)-1 );
				});
			}
		}
	})
	// 入力部分を使わないので、最小のサイズにして、高さをセット
	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })
	.show();

});

</script>
<style type="text/css">
/* 対象範囲内の Spinner の表示調整 */
#spinner_box .ui-spinner-button {
	width: 100%!important;
}
#spinner_box .ui-icon {
	left:4px!important;
}

/* 左右にアイコンの向きを配置する */
.rotate_wrap {
	display: inline-block;	/* 回転する為に行内ブロック化 */
	transform: rotate(90deg); /* 回転 */
	margin-left: 10px; /* 表示位置調整 */
}

/* 表示フィールド用 */
.x, .y {
	width:50px;
}
</style>
<div id="spinner_box">
▼ この下に、Spinner 用の テキストフィールドがありますが非表示にしています<br>
y <input id="spinner1" style='display:none;' value="0"><br>
Spinner は通常では上のように縦になります<br><br>

▼ この下の Spinner 用のフィールドは SPAN 要素で挟んでいます<br>
x<span class="rotate_wrap"><input id="spinner2" style='display:none' value="0"></span><br>
SPAN 要素に対して回転する CSS を適用して横表示にしています

<br><br>
x <input type="text" class="x"> y <input type="text" class="y"><br>
x <input type="text" class="x"> y <input type="text" class="y"><br>

</div>

ブログ記事で使うにあたって、jQuery を使う記事だけでロードするようにしてあります。

JavaScript

JavaScript : SHA256