フォームの数値をクリックで加算/減算「User Adjustable Incrementer」

当ページのリンクには広告が含まれています。

jQuery Plugin » フォーム » フォームの数値をクリックで加算/減算「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>

User Adjustable Incrementer

jQueryプラグイン「User Adjustable Incrementer」

ソース（ HTML + jQuery ）

関連記事（一部広告含む）