スピン ボタンのカスタム テキスト ボックスの値は、j​​Query_jquery に基づいて増減します。

フォームをデザインするときに、テキスト ボックスの値の自動インクリメントまたは自動デクリメント関数を実装する必要がある場合があります。たとえば、デフォルトは 1 です。指定したステップ値を増やすには上ボタンをクリックし、ステップ値を増やすには下ボタンをクリックします。指定されたステップ値を減らすには、jQuery プラグイン jQuery Spin Button を使用します。この機能を実装するには、数行のコードのみが必要です。

使用説明書
1. jQuery ライブラリ ファイルと jQuery Spin Buttonライブラリ ファイル (現在のバージョン 1.1.1)

マテリアルの準備
上下ボタンの画像、デフォルトのパスは/img/spin/、上ボタンと下ボタンの画像の名前はspin-button.png、カスタム変更が可能です

サンプルコード
1、ファイル部分

コードをコピー コードは次のとおりです:

2. HTML 部分 (カスタム テキスト ボックス)

コードをコピー コードは次のとおりです:

3 つ目は、JavaScript 部分 (jQuery プラグイン jQuery Spin Butt によって呼び出されます)

コードをコピー コードは次のとおりです。

< ;script type="text/javascript">
$(document).ready(function(){
$('#number').spin();
});

上記からわかるように、jQuery プラグイン jQuery Spin Button を使用してテキスト ボックスの値を増減するカスタマイズは非常に簡単です。ボタンの画像と値の初期値を設定するだけです。 . カスタムテキストボックスの値を自己増加または減少させる機能を実装します。

4 つのユーザー定義構成
imageBasePath: '/img/spin/'、ボタン画像パス
spinBtnImage: 'spin-button.png'、画像ボタン画像名
spinUpImage: 'spin-up.png'、上方向増加ボタンのイメージ名
spinDownImage: 'spin-down.png'、下方向減少ボタンのイメージ名
間隔: 1、ステップ値
最大: null 、最大値
min: null、最小値
timeInterval: 500、クリック時間間隔
timeBlink: 200 クリック瞬き時間

1、カスタム ステップ値は 10 (コードは上記のJavaScript部分と同じ)
$('#number').spin({interval:10});

2、最大値と最小値をカスタマイズします
$('# number').spin( {max:100,min: -100});

3, カスタム ボタン画像パス
$('#number').spin({imageBasePath: '/images/ '});

jQuery プラグインの jQuery Spin Button カスタム構成は、パーソナライズされたテキスト ボックスの値の自動インクリメントおよびデクリメント機能をカスタマイズするのに非常に便利で、一般に使用方法も非常に簡単です。カスタム テキスト ボックスの値の自動インクリメントまたはデクリメントが使用される jQuery プラグイン jQuery Spin Button は、1 行のコードで簡単に完成できます。
デモを見る:
http://demo.jb51.net/js/jquery-spin/index.html