一部の製品見積 Web サイトでは、ユーザーがフィルタリングできるように一連の価格帯を指定する必要があります。これにより、フィルタリングされた範囲に加えてカスタム価格帯が追加され、ユーザーに選択肢が 1 つ増えます。この記事では、CSS と組み合わせた jQuery プラグインを使用して、スライダーを使用して価格帯を選択します。説明については、こちらの記事をお読みください。
jQuery ui には、非常に便利なドラッグ スライダー プラグインであるスライダー プラグインがあります。スライダーのドラッグを実装するには、ページヘッドに次の js を読み込む必要があります。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>
もちろん、プロジェクトの運用効率を考慮すると、上記の複数のjsを1つのjsに圧縮することもできます。大規模なWEBアプリケーションプロジェクトではこれらを考慮する必要があります。
これらの関連する JS は、jquery ui 公式 Web サイト
からダウンロードできます。
次に、メインの HTML コードを構築します:
<ul class="price_list">
<li class="title">价格范围：</li>
<li><a href="#">3000元以下</a></li>
<li><a href="#">3000-4000元</a></li>
<li><a href="#">4000-5000元</a></li>
<li><a href="#">5000-6000元</a></li>
<li><a href="#">6000-7000元</a></li>
<li><a href="#">7000-8000元</a></li>
<li><a href="#">8000-9000元</a></li>
<li><a href="#">9000-10000元</a></li>
<li><a href="#">10000元以上</a></li>
<li id="custom"><a href="javascript:;" id="show">自定义</a>
<div id="slider_wrap">
<div id="slider">
<div id="range"></div>
</div>
<p><input type="text" class="input" id="start" value="0" /> -
<input type="text" class="input" id="end" value="3000" />
<input type="button" class="btn" id="btn_ok" value="确 定" /></p>
</div>
</li>
</ul>
価格範囲は一連の li で構成され、カスタム ID を設定し、スライダー選択を表示する必要がある div #slider_wrap を含めます。もちろん、この div はデフォルトでは非表示になります。 。外観効果を実現するには CSS を使用する必要があります。
CSS
CSS を使用してページに見栄えの良い外観を与えます:
.price_list{list-style:none}
.price_list li{float:left; line-height:22px; margin-right:10px; padding:2px 6px}
.price_list li.title{display:block; width:60px; height:60px;}
#custom{border:1px solid #d3d3d3; padding:0 16px 0 2px; background:url(images/icon.gif)
no-repeat right 8px; position:relative;}
.custom_show{background:url(images/icon.gif) no-repeat right 18px;}
#show{width:100%; height:26px}
.input{width:66px; height:20px; line-height:20px; border:1px solid #d3d3d3}
.btn{width:54px; height:24px; line-height:24px; background:url(images/btn_bg.gif)
repeat-x; border:1px solid #d3d3d3; cursor:pointer}
#slider_wrap{width:250px; height:80px; padding:10px; position:absolute; left:-1px;
top:22px; border:1px solid #d3d3d3; background:#fff; display:none; z-index:1001}
#slider{width:230px; height:40px; margin:5px auto; border:none; background:
url(images/line_bg.gif) no-repeat}
#range{width:220px; margin-left:4px}
#slider_wrap p{width:230px; margin:4px auto}
重要なのは、ドロップダウン div をポップアップしてスライド選択範囲の CSS を表示し、絶対位置と相対位置を指定して表示レイヤーの位置を決定することです。
表示レイヤーのスライダー プラグインの CSS は、jquery ui に付属の CSS からのものを使用し、いくつかの小さな変更を加えました。
.ui-slider {position:relative; text-align:left;}
.ui-slider .ui-slider-handle {position:absolute; z-index:2; width:11px; height:14px;
cursor: default; background:url(images/arr.gif) no-repeat }
.ui-slider .ui-slider-range {position:absolute; z-index:1; display:block; border:0;
background:#f90}
.ui-slider-horizontal {height:10px; }
.ui-slider-horizontal .ui-slider-handle {top:14px; margin-left:0; }
.ui-slider-horizontal .ui-slider-range {top:20px; height:4px; }
.ui-slider-horizontal .ui-slider-range-min {left:0; }
.ui-slider-horizontal .ui-slider-range-max {right:0; }
jQuery
まず、「カスタマイズ」をクリックしたときにスライダー範囲に表示されるレイヤーをプルダウンする必要があります。 「カスタマイズ」をクリックするとドロップダウンレイヤーが表示され、再度クリックするとドロップダウンレイヤーが非表示になります。
$(function(){
$("#show").click(function(){
if($("#slider_wrap").css("display")=="none"){
$("#slider_wrap").show();
$("#custom").css("background-position","right -18px");
}else{
$("#slider_wrap").hide();
$("#custom").css("background-position","right 8px");
}
});
});
生徒の中には、クリックではなくトグル方式を使用すればよいのではないかと疑問に思う人もいるかもしれません。私はそれを試してみましたが、うまくいきました。しかし、後でドロップダウン レイヤーを非表示にするには、ドロップダウン レイヤーで [OK] をクリックする必要があります。トグル方式の場合、「OK」ボタンをクリックした後にドロップダウンレイヤーをポップアップさせるために2回クリックする必要があるため、この問題を解決するためにクリック方式+判定を選択しました。
次に、スライダー プラグインを呼び出します:
$("#range").slider({
min: 0,
max: 10000,
step: 500,
values: [0, 3000],
slide: function(event, ui){
$("#start").val(ui.values[0]);
$("#end").val(ui.values[1]);
}
});
スライダーの最大値 max を 10000、最小値 min を 0、スライダーの各スライドの距離ステップは 500、デフォルトの初期範囲値は 0 ～ 3000 に設定します。スライダーをスライドさせるときに、#start と #end の 2 つのテキスト ボックスに値を割り当てます。パラメーター設定とメソッド呼び出しの詳細については、jquery ui 公式 Web サイトを確認してください:
最後に、価格範囲を選択した後、「OK」ボタンをクリックしてスライダー選択ボックスを閉じ、「カスタム」状態に変更します。コードは次のとおりです:
$("#btn_ok").click(function(){
$("#slider_wrap").hide();
$("#custom").css("background-position","right 8px");
var start = $("#start").val();
var end = $("#end").val();
$("#show").html(start+"-"+end);
});
このようにして、希望する効果が表示されるので、試してみましょう。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
