jQueryのスライダーとは何ですか?-フロントエンドQ&A-php.cn

jQueryのスライダーとは何ですか?

青灯夜游

リリース： 2023-01-04 09:37:07

オリジナル

3971 人が閲覧しました

jquery では、スライダーは「スライダー、フローティングブロック、スクロールバースライダー」を意味し、jquery UI の小さなプラグインです。スライダープラグインを使用すると、スライダーによる選択が可能になります。複数のハンドルや範囲など、さまざまなオプションがあります。ハンドルはマウスまたは矢印キーを使用して移動できます。

jQueryのスライダーとは何ですか?

#この記事の動作環境: Windows10 システム、jquery バージョン 1.10.4、thinkpad t480 コンピューター。

slider (スライダー) は、jquery UI の小さなプラグインです。

jQuery UI Slider プラグインを使用すると、スライダーを使用して選択できます。複数のハンドルや範囲など、さまざまなオプションがあります。ハンドルはマウスまたは矢印キーを使用して移動できます。

テーマ

スライダーウィジェットは、jQuery UI CSS フレームワークを使用してその外観と操作性を定義します。スライダー固有のスタイルを使用する必要がある場合は、次の CSS クラス名を使用できます。

ui-slider: スライダーコントロールのトラック。この要素には、スライダーの向きに応じて、ui-slider-horizontal クラスまたは ui-slider-vertical クラスもあります。

ui-slider-handle: スライダーハンドル。
ui-slider-range: 範囲オプションを設定するときに使用される選択された範囲。 range オプションが「min」または「max」に設定されている場合、要素にはそれぞれ追加の ui-slider-range-min または ui-slider-range-max クラスがあります。

#例

単純な jQuery UI スライダー。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>滑块部件（Slider Widget）演示</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <style>#slider { margin: 10px; } </style>
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
 
<div id="slider"></div>
 
<script>
$( "#slider" ).slider();
</script>
 
</body>
</html>

ログイン後にコピー

プログラミング関連の知識について詳しくは、

プログラミング学習

をご覧ください。！関連する推奨事項: 「

jQuery チュートリアル

」

以上がjQueryのスライダーとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。