Question

我正在尝试在chrome扩展程序弹出窗口中设置一个滑块。我的滑动条形码需要jquery但不幸的是，我的程序将无法识别弹出窗口中的jquery代码。这是我检查弹出窗口时产生的错误：

script.js:1 Uncaught TypeError: $(...).slider is not a function

这是我创建滑块的script.js代码。鉴于它没有执行超过第一行，似乎我有一个jquery问题：

$('.application-progress').slider({
range: "min",
min: 0,
max: 100,
animate: true,
slide: function(event, ui) {
    $("#progress").html(ui.value + "%");
    }
});

$("#progress").html($(".application-progress").slider("value") + "%");

$("input, select").change(function() {
    var percentage = 0;
    $('input, select').each(function() {
        if ($.trim(this.value) != "") percentage += 10;
    });
    $(".application-progress").slider("value", percentage);

    $("#progress").html(percentage + "%");
});

这是我弹出窗口的html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Slider Bar!</title>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="progress"></div><div class="application-progress"></div>
    </body>
</html>

Answer 1

看起来你忘了包含jQuery UI：

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

Coz，jQuery UI Slider需要在jQuery之后加载jQuery UI库。

在chrome扩展弹出窗口中使用jquery

1 个答案: