オンライン実行
元の 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>
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
