如何使用 jQuery UI 滑块显示内容?
How to show content with jQuery UI Slider?
示例:
我有一个关于如何在每个步骤上使用 jQuery UI 滑块显示内容并删除以前的内容的问题。
<div id="range-slider"></div> <!-- ui jquery range slider-->
<!-- block of content -->
<div class="items">
<!-- first-block -->
<div class="slider-content">
<span>lorem ipsum:</span>
<span class="price">30 000</span>
</div>
<!-- second-block -->
<div class="slider-content">
<span>lorem ipsum:</span>
<span class="price">30 000</span>
</div>
</div>
$("#range-slider").slider({
max: 20,
min: 4,
step: 4,
change: function (event, ui) {
}
});
在您的 change
函数中,遵循此代码
$('.items div').removeClass('active');
$('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');
并添加slide
回调
slide: function(event, ui) {
$('.items div').removeClass('active');
$('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');
}
这是一个fiddle
样式 #range-slider
、ui-slider-range
、ui-slider-handle
、ui-state-active
、ui-state-hover
示例:
我有一个关于如何在每个步骤上使用 jQuery UI 滑块显示内容并删除以前的内容的问题。
<div id="range-slider"></div> <!-- ui jquery range slider-->
<!-- block of content -->
<div class="items">
<!-- first-block -->
<div class="slider-content">
<span>lorem ipsum:</span>
<span class="price">30 000</span>
</div>
<!-- second-block -->
<div class="slider-content">
<span>lorem ipsum:</span>
<span class="price">30 000</span>
</div>
</div>
$("#range-slider").slider({
max: 20,
min: 4,
step: 4,
change: function (event, ui) {
}
});
在您的 change
函数中,遵循此代码
$('.items div').removeClass('active');
$('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');
并添加slide
回调
slide: function(event, ui) {
$('.items div').removeClass('active');
$('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');
}
这是一个fiddle
样式 #range-slider
、ui-slider-range
、ui-slider-handle
、ui-state-active
、ui-state-hover