Question

刚开始玩JQuery UI滑块，无法在我的页面上显示它。试了一堆东西有点无济于事。继承我的代码，任何建议将不胜感激。我使用Django来引用javascript文件，

<html>
    <head>
        <title>Search Results</title>
        <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.mouse.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.slider.js"></script>


        <LINK rel="stylesheet" href="{{ STATIC_URL }}jquery-ui-1.8.4/themes/base/jquery.ui.slider.css" type="text/css">
    </head>
    <body>
        <meta charset="utf-8" >
        <style>
            #demo-frame > div.demo { padding: 10px !important; }
        </style>
        <script>
            $(function() {
                $( "#slider" ).slider();
            });
        </script>
    <div class="demo">

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

    </div><!-- End demo -->



    <div class="demo-description">
    <p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
    </div><!-- End demo-description -->
</body>

Answer 1

jQuery UI非常易于设置。只需在文档<head>标记中引用相应的CSS / JavaScript文件。

<head>代码中的代码：

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

滑块初始化HTML ：

<div id='mockSlider'></div>
<input type='text' id='currentValue' />

滑块初始化jQuery ：

$("#mockSlider").slider({
    range: false,
    min: 0,
    max: 100,
    slide: function(event, ui) {
        doSomething(ui.value);
    }
});

function doSomething(sliderValue) {
    $('input[type="text"]').attr('value', sliderValue);
}

滑块初始化CSS ：

#mockSlider {
    width: 80%;
    margin-bottom: 15px;
}

#currentValue {
    width: 3empx;
    text-align: center;
}

按照以下链接查看jsFiddle示例。具体来说，看一下外部资源菜单，您将在其中看到3个代码引用。然后，按F12并使用调试选择工具查看渲染文档的<head>中的内容。

Example Slider

Answer 2

加载页面时是否收到任何javascript错误？如果是这样的话是什么？

你能确保你的javascripts（jqyeru ui）正确加载吗？

如果使用firebug，则可以在控制台选项卡中看到错误。 FireBig是一个firefox插件，它使Web开发变得更加容易

www.getfirebug.com

Answer 3

有时jquery ui小部件未显示可能是由于缺少jquery-ui-scope div。所有jquery ui样式都在div的范围内使用jquery-ui-scope类定义。

JQuery UI Slider未显示

3 个答案: