ホームページ > 記事 > ウェブフロントエンド > jQueryのスライダーとは何ですか?
jQueryのスライダーとは何ですか?
- 青灯夜游オリジナル
- 2020-12-14 09:57:553797ブラウズ
jquery では、スライダーは「スライダー、フローティング ブロック、スクロール バー スライダー」を意味し、jquery UI の小さなプラグインです。スライダープラグインを使用すると、スライダーによる選択が可能になります。複数のハンドルや範囲など、さまざまなオプションがあります。ハンドルはマウスまたは矢印キーを使用して移動できます。
テーマ
スライダー ウィジェットは、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSキーフレームとは何ですか次の記事：CSSキーフレームとは何ですか