Question

我长时间搜索HTML5中的滑块。在我搜索的时候，我偶然发现了jQuery Tools看起来非常好看。所以我试一试。我下载所需的CSS文件并启动以下代码，工作正常。

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <!-- rangeinput styling -->
  <link rel="stylesheet" type="text/css" href="skin1.css"/>
</head>

<body>
  <input type="range" name="test" min="100" max="300" value="150" />
  <script>
    $(":range").rangeinput();
  </script>
</body>
</html>

到目前为止一切都还好。现在我想从网站上下载最小版本的工具，只包括范围输入（大小：大约4 kb，很棒！）。我使用本地保存的JavaScript文件，不起作用。所以我创建了最大可用文件，不起作用。所以我下载了src链接中提到的文件，工作正常。我不明白为什么......任何人都知道我做错了什么？

Answer 1

jQuery.rangeinput是jQuery Tools的库之一。

full / jquery.tools.min.js包含以下UI库+ jQuery库（138.7 kB）

dateinput / dateinput.js
叠加/ overlay.js中
叠加/ overlay.apple.js
rangeinput / rangeinput.js
滚动/ scrollable.js
滚动/ scrollable.autoscroll.js
滚动/ scrollable.navigator.js
选项卡/ tabs.js
选项卡/ tabs.slideshow.js
工具箱/ toolbox.expose.js
工具箱/ toolbox.flashembed.js
工具箱/ toolbox.history.js
工具箱/ toolbox.mousewheel.js
工具提示/ tooltip.js
工具提示/ tooltip.dynamic.js
工具提示/ tooltip.slide.js
验证器/ validator.js

更好地加载表单/ jquery.tools.min.js，其中包含dateinput，rangeinput和validator工具。（19.3 kB）+ jQuery Library。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://cdn.jquerytools.org/1.2.7/form/jquery.tools.min.js"></script>

有关jQuery工具的更多信息，请访问http://jquerytools.org/download/

如果您想单独使用Range Input，最好尝试任何其他仅提供Range Input功能的插件。您可以使用以下两个插件中的任何一个，并保存超过10KB。

slideControl.js - http://nikorablin.com/slideControl/
jQuery Simple Slider - http://loopj.com/jquery-simple-slider/

Answer 2

如果您使用的是rangeinput（大约4kb）的独立版本，则应该在页面的某处包含一个jquery主库。

Answer 3

因为所有JQueryTools插件使用且需要 JQuery库。

这意味着您有两个选择：

在使用CDN link for example
下载JQueryTools的自定义版本，包括JQuery lib，如下所示：

enter image description here

jQuery工具范围从本地javascript输入负载

3 个答案: