Слайдер JqueryUI не будет отображаться

Question

Я пытаюсь добавить дополнительный слайдер в свое приложение, я помещаю слайдер jquery в jqueryUI, но он не работает на моей веб-странице.

HTML генерируется через php и $ ('#slider'). slider () - это вызов в моем js

Я дам здесь код:

/ CSS /

#slide{
    display: none;
    position: absolute;
    float: left;
    height: 14px;
    width: 200px;
    top: 35px;
    /*background-color: rgba(102, 102, 102, 0.90);*/
    padding : 10px;
    z-index: 2;
}

/ HTML /

<div id="wrapper" data-role="content">

<div id="slide"><div id="slider"></div></div>

</div>

/ * JAVASCRIPT * /

$(document).on("click","#page-slider",function(){
    $('#slide').toggle("slow");
    $('#slider').slider();
});

Если есть кто-то, кто видит проблему или у нее есть идея, это будет здорово.

Заранее спасибо

Answer 1

У вас загружен jQuery UI CSS? Без этого он создаст слайдер HTML, но вы ничего не увидите, потому что для него нет CSS.

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>

Во-вторых, почему вы инициализируете ползунок в функции щелчка? Вы должны сделать это только один раз, когда документ готов:

$(document).ready( function() {
    $('#slider').slider();

    $(document).on("click","#page-slider",function(){
        $('#slide').toggle("slow");
    });
});

Пример без CSS: http://jsfiddle.net/jtbowden/Ehr8y/

Пример с CSS: http://jsfiddle.net/jtbowden/Ehr8y/4/

Это тот же код, но во втором примере я загружаю базовый jquery UI CSS. Если вы посмотрите на источник без CSS, вы увидите:

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
</div>

Итак, ясно .slider() выполнено.