jQuery區間滑塊拖動選擇代碼



133 531 178



特效描述:jQuery 區間滑塊拖動,jQuery區間滑塊拖動選擇代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

3. HTML代碼

<!--價格篩選條開始-->
<div class="price-dd-choose">
    <div id="price-range" class="price-range">
        <div class="price-range-slider">
            <div class="bg-darkgrey"></div>
            <div class="bg-darkgrey-hand"></div>
            <ul class="slider-ul">
                <li class="slider-ul-first"><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
                <li><i class="icon-dian"></i></li>
            </ul>
        </div>
        <div class="slide-selected"></div>
        <i class="btn-price btn-left"></i>
        <i class="btn-price btn-right"></i>
        <div class="tip">
            <div class="tip-content"></div>
            <span class="tip-top tip-arrow"></span>
        </div>
        <div class="price-range-text">
            <span class="number number-first">0萬</span><span class="number">5萬</span><span class="number">10萬</span><span class="number">15萬</span><span class="number">20萬</span><span class="number">25萬</span><span class="number">30萬</span><span class="number">35萬</span><span class="number">50萬</span><span class="number">70萬</span><span class="number">100萬</span>
        </div>
    </div>
</div>
<!--價格篩選條結束-->
<script type="text/javascript">
$(function() {
	$("#price-range").slider({
		unit: "萬",
		beyondMax: true,
		beyondMin: true,
		firstWidth: 34,
		lastWidth: 23,
		scale: [
			{
				key: 0,
				value: [1, 1, 1]
			},
			{
				key: 5,
				value: [1, 1, 1, 1, 1]
			},
			{
				key: 10,
				value: [1, 1, 1, 1, 1]
			},
			{
				key: 15,
				value: [1, 1, 1, 1, 1]
			},
			{
				key: 20,
				value: [1, 1, 1, 1, 1]
			},
			{
				key: 25,
				value: [1, 1, 1, 1, 1]
			},
			{
				key: 30,
				value: [1, 1, 1, 1, 1]
			},
			{
				key: 35,
				value: [3, 2, 5, 3, 2]
			},
			{
				key: 50,
				value: [5, 5, 5, 5]
			},
			{
				key: 70,
				value: [10, 10, 10]
			},
			{
				key: 100,
				value: 0.5
			},
			{
				key: 110
			}
		]
		})
	.on("changed", function(e, args) {
		var min = args.value.leftValue,
			max = args.value.rightValue;
		// if (min == 0) min = 1;
		// if (6680 > 110) {
		//     if (max == 6680) max = 1;
		// } else {
		//     if (max == 110) max = 1;
		// }
		// if (max == 10000) max = 1;
		// if (min + '_' + max == '2_6680') {
		//     min = 0;
		//     max = 0;
		// }
		console.log(min,max);
		// location.href = 'car/' + min + '_' + max + '-0.0_0.0-0-0-0-0-0-0-0-0/';
	});
	$("#price-range").data("slider").setRange({
		leftValue: 0,
		rightValue: 110
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 圖片拖動 圖片拖拽 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子