jQuery jRange はスライド選択の数値範囲を実装します。-jsチュートリアル-php.cn

jQuery jRange はスライド選択の数値範囲を実装します。

WBOY

リリース： 2016-05-16 16:09:39

オリジナル

1888 人が閲覧しました

ショッピング時の価格帯の選択、ホストの購入時の CPU やメモリサイズ構成の選択など、ページ上で値の範囲を選択する必要がある場合があります。直感的なスライダーバーを使用して直接選択できます。手動で数値を入力する必要がなく、簡単で便利です。

HTML

まず、jQuery ライブラリファイルと jRange 関連の CSS ファイル: jquery.range.css およびプラグイン: jquery.range.js をロードします

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

<スクリプト src="jquery.js"> 

<リンク rel="スタイルシート" href="jquery.range.css">
<スクリプト src="jquery.range.js"> 

次に、スライダーセレクターを表示する必要がある場所に次のコードを追加します。

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

hiiden タイプのテキストフィールドを使用し、デフォルト値 (23 など) を設定しました。

jQuery

jRange プラグインの呼び出しは非常に簡単で、次のコードを使用するだけです:

$('.single-slider').jRange({

から: 0、
へ: 100、
ステップ: 1、
スケール: [0,25,50,75,100]、
形式: '%s'、
幅: 300、
showLabels: true、
showScale: true
});

次に、Web ページを実行すると、デモで効果が表示されます。

オプション設定

プラグイン jRange は、さまざまなニーズを満たすために必要なオプション設定も提供します。

オプション	説明	デフォルト値
から	スライド範囲の最小値、0 などの数値
へ	スライド範囲の最大値、100 などの数値
ステップ	ステップ値、各スライドのサイズ	1
スケール	スライダーの下のスケールラベル、[0,50,100] などの配列タイプ	[出発地、到着地]
ラベルを表示	ブール型、スライダーの下にサイズラベルを表示するかどうか	本当
showScale	ブール型、スライダーの上に数値ラベルを表示するかどうか	本当
フォーマット	数値形式	"%s"
width	Slider bar width	300
isRange	Whether it is the selection range.	false