Слайдер jQuery UI: как его встроить? - PullRequest
Новая
       9

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

3 голосов
/ 30 ноября 2011

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

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, в этом случае слайдер просто рухнул ...

Ответы [ 2 ]

7 голосов
/ 30 ноября 2011

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

0 голосов
/ 15 мая 2016

В случае, если вы так же безобидны, как и я, эта разработка может помочь: вы должны включить 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; }

Adjustwidth будет тем, что вам нужно.

...