JqueryUI 滑块不会显示

Question

我正在尝试在我的应用程序上放置一个可选滑块，我放置了 jqueryUI 的 jquery 滑块，但它在我的网页上不起作用。

html 是通过 php 生成的，并且在我的 js 中调用了 $('#slider').slider()

我把代码放在这里：

/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() 被执行了。