jQueryで実現するデジタル加減算効果まとめ_jquery

オンライン ショッピングの注文を送信する場合、通常、Web ページに数量選択コントロールがあり、購入者は購入する商品の数を選択する必要があります。開発者は、追加などの操作を微調整できるようにこのコントロールを作成します。もちろん、個数を直接入力することもできます。

左右の数字の足し算と引き算

たとえば、JD.com は現在、注文を送信するときに左右に数字を加算および減算するエフェクトを使用しています。このエフェクトは単純で操作が簡単です。 jquery.spinner.js プラグインを使用して左右の数値を加算および減算します。呼び出し方法は非常に簡単です。

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

呼び出しも非常に簡単です。まず、jquery ライブラリ ファイルと jquery.spinner.js をロードし、次のコードを使用します。

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

$('.spinner').spinner();

ブーツストラップ スタイル、右側にプラスとマイナス

ブートストラップは古くから人気があり、ブートストラップ形式のアプリケーションも数多くありますが、ブートストラップをベースにした最小値、最大値を設定できるデジタル加算・減算プラグインを紹介します。 、増加および減少 (ステップ値)、数値を手動で入力します。

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

ブートストラップ関連の css ファイルと js ファイルをロードした後、プロジェクトがブートストラップに基づいている場合は、ページの効果を直接確認できます。
プロジェクト アドレス:
https://github.com/xixilive/jquery-spinner
を参照して、関連するパラメーター設定を表示することもできます。

jQuery ui スタイル、右側の加算と減算

jQuery ui には、最小値、最大値、増分と減分 (ステップ値) を設定し、手動で数値を入力できる数値加算および減算プラグインも提供されています。

コードをコピーします

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

プロジェクトで jquery ui を使用している場合は、jquery ui を呼び出して数値の加算と減算の関数を実装できます。

コードをコピーします

コードは次のとおりです: $("#spinner").spinner({ 最大:10、 分:0、

ステップ:2

});



上記は、jQuery を使用して数値を加算および減算するために私が使用しているメソッドです。これらの関数は比較的単純ですが、非常に実用的です。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。