jquery ui slider pips - 挣扎于脚本依赖

Question

我知道这是一个基本问题，但我无法解决这些问题。我很确定它与依赖关系和我包含它们的顺序有关，我们将不胜感激。

$(".slider").slider().slider("pips");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
    <script src="bower_components/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.js"></script>
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" />
    <link rel="stylesheet" href="bower_components/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.min.css" />
    <script src="main.js"></script>
  </head>
<body>
    <div class="slider"></div>
</body>
</html>

Answer 1

您必须确保所有库都正确加载。如果未加载，jQuery UI 将抛出“pips”不是一个选项的错误。例如，您可以使用：

$(function() {
  $(".slider").slider().slider("pips");
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.js"></script>

<div class="slider"></div>

此脚本按预期工作，因为所有元素都已正确加载。希望对您有所帮助。

jquery ui slider pips - 挣扎于脚本依赖

jquery ui slider pips - struggling with script dependencies

jquery

jquery-ui

jquery-ui-slider-pips