jQuery Пользовательский слайдер: как его встроить?

Question

Я пытаюсь показать несколько ползунков с этикетками на той же строке, например:

Label1: [----O--] Label2: [--O---] Label3: [O-----] 

Все это содержание создается с помощью JS:

var controls = $('<div></div>'); 
controls.append($('<b>Label1:</b>')); 
controls.append($('<div></div>').slider({...})); 
controls.append($('<b>Label2:</b>')); 
controls.append($('<div></div>').slider({...})); 
controls.append($('<b>Label3:</b>')); 
controls.append($('<div></div>').slider({...})); 
// insert controls in the DOM 

Что такое правильный способ встраивать ползунки? По умолчанию они отображаются как элементы блока и соответственно разрывают линии. Я попытался сменить CSS display:inline, в этом случае слайдер просто разрушается ...

Answer 1

Вместо этого используйте display:inline-block, чтобы он не рухнул. После этого вам может потребоваться использовать ширину набора.

Answer 2

В случае, если вы, как noobious как я, эта разработка может помочь: Вы должны быть в том числе JQuery-UI CSS, например, этот URL:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css 

В нем вы увидите следующее:

.ui-slider .ui-slider-range { 
    position: absolute; z-index: 1; 
    font-size: .7em; 
    display: block; 
    border: 0; background-position: 0 0; 
} 

Это устанавливает отображение на block. Вы хотите, чтобы это было inline-block. Но если вы включите этот css из Интернета, вы не сможете его отредактировать. Поэтому вам нужно настроить собственный CSS, чтобы он работал.

В вашем CSS, добавьте эту строку, чтобы переопределить атрибут display для ui-slider класса:

.ui-slider { display : inline-block; width : 10em; } 

Отрегулируйте width быть то, что вам нужно.