Question

我正在尝试在我的应用程序上放置一个可选滑块，我将jqueryi的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()已执行。

JqueryUI滑块不会显示

1 个答案: