Показать пронумерованные интервалы над слайдером jQuery - PullRequest
Новая
       3

Показать пронумерованные интервалы над слайдером jQuery

1 голос
/ 16 сентября 2010

Hallo,

Я добавил слайдер jQuery, и теперь я хочу, чтобы над слайдером были цифры, обозначающие интервалы.Почти как повседневный правитель.У кого-нибудь есть быстрый способ сделать это?

Ответы [ 2 ]

2 голосов
/ 16 сентября 2010

Взгляните на этот плагин jQuery UI: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

На самом деле это более сложная версия слайдера jQuery UI, созданная теми же людьми, которые спонсируют jQuery UI.Однако при этом вместо списков используется HTML-элемент select, так что вы можете удалить функцию добавления тиков из плагина и использовать ее вместо этого (не просто, но, надеюсь, лучше, чем написать свой собственный!).

Вот что использует плагин: 

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i){
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ;
    var labelText = (options.labelSrc == 'text') ? this.text : this.value;
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>');
});

Для каждого элемента option он добавляет тик, с меткой, добавленной другим блоком кода ниже.То, что он делает, - это в основном вставка списка диапазонов в элемент слайдера, причем текст берется непосредственно из атрибута значения элемента.Вам также понадобится немного CSS, чтобы правильно оформить тики.

0 голосов
/ 16 сентября 2010

Я использую этот код.
img / current.png - путь к текущему изображению при нажатии на Click) 

function setSlider(selected) {
 $('.slider_item > img').remove();
 $(selected).html('<img src="img/current.png">'+$(selected).html());
 } 



 <div class="line">
        <span onclick="setSlider(this);" class="slider_item left">
            0.5
        </span><span onclick="setSlider(this);" class="slider_item middle">
            1
        </span><span onclick="setSlider(this);" class="slider_item middle">
            2
        </span><span onclick="setSlider(this);" class="slider_item middle">
            4
        </span><span onclick="setSlider(this);" class="slider_item middle">
            8
        </span><span onclick="setSlider(this);" class="slider_item middle">
            16
        </span><span onclick="setSlider(this);" class="slider_item right">
            32
        </span>
    </div>
...