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滑块点-努力与脚本依赖

1 个答案: