今日の人気記事

まだデータがありません。

フォームの数値をクリックで加算/減算「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>
スポンサーリンク

関連記事(一部広告含む)