フォームの数値をクリックで加算/減算「User Adjustable Incrementer」
当ページのリンクには広告が含まれています。
スポンサーリンク
クリックで数値を加算/減算するフォームを実装するプラグイン「User Adjustable Incrementer」を紹介します。
jQueryプラグイン「User Adjustable Incrementer」
このプラグインを使えば、フォームの数値の加算/減算をクリックのみで行うフォームを作成することができます。
わざわざテンキーを使って、入力する必要がありません。
また、オプションでは数値の上限（Max）と下限（Min）を設定することができるので、便利！
スポンサーリンク
それでは、デモページのフォームをご覧ください。
「User Adjustable Incrementer」のデモ
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="User Adjustable Incrementer のデモでーす。">
<title>User Adjustable Incrementer - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src="userincr.js"></script>
<script>
$(function(){
$("input.manual-adjust").userincr().data({
'min':0,
'max':100
});
$("input.adjust").userincr({
buttonlabels:{
'dec':'▼',
'inc':'▲'
},
});
});
</script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/user-adjustable-incrementer/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>User Adjustable Incrementer のデモでーす。</h1>
<p>「▼」「▲」ボタンをクリックしてみてください。</p>
<input type="text" class="manual-adjust" value="50" />
</body>
</html>
スポンサーリンク