ＳＱＬの窓
<< Android の ListVie… | TOP | jQuery でコンボボ… >>

2015年07月16日


jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する

 
オンライン実行

元の INPUT 要素は使用しないので、style='display:none' を指定しておきます。個別に jQuery の css メソッドで調整を行います。

	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })


▼ 以下は実行サンプルですが、スタイルとして『base』を使用しているのでボタン部分がグレーになっています。
x / y



x y
x y 
横向きになっているのは、jQuery からの CSS 設定で回転させています

	// コントロールを横にしたい場合
	// ※ コントロールのサイズや左右の余白を調整します
	$(".rotate_wrap").css({
		display: "inline-block",
		transform: "rotate(90deg) scale(1.5)",
		"margin":"0 15px 0 18px",
	});


以下の部分は、ボタンとは関係無く、テキストフィールドに対して結果を表示する際に、parseInt($(this).val()) が失敗する場合は 0 をセットし、そこから値を減らしています。
$(this).val( (parseInt($(this).val())||0)-1 );


▼が全体のソースコードですが、ボタンを回転させたり、サイズや配置を調整する為にはラッパーが必要なのが解ります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>

$(function(){

	// コントロールを横にしたい場合
	// ※ コントロールのサイズや左右の余白を調整します
	$(".rotate_wrap").css({
		display: "inline-block",
		transform: "rotate(90deg) scale(1.5)",
		"margin":"0 15px 0 18px",
	});
	// 通常は縦です
	$(".normal_wrap").css({
		display: "inline-block",
		transform: "scale(1.5)",
		"margin":"0 15px 0 7px",
	});

	$( "#spinner_x" ).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()
	// spinner のラッパーを調整します
	.parent().css({width:"16px",border:"1px solid #808080"});

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

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



});


</script>

<div id="spinner_box">
x
<input id="xnum" type="text" size="3" class="x">
<span class="rotate_wrap"><input id="spinner_x" style='display:none;'></span>
/ 
y
<input id="ynum" type="text" size="3" class="y">
<span class="normal_wrap"><input id="spinner_y" style='display:none'></span>

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

</div>
タグ：jquery jQuery UI
【jQuery UIの最新記事】
posted by lightbox at 2015-07-16 14:20 | jQuery UI | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり