JqueryUI滑块不会显示

Question

我试图在我的应用程序上放置一个可选的滑块,​​我把jqueryUI的jquery滑块但它在我的网页上不起作用.

html是通过php和$('#slider')生成的.slide()是在我的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()执行.