2

我在 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链接中提到的文件，工作正常。我不明白为什么……有人知道我做错了什么吗？

4

3 回答 3

2

jQuery.rangeinput 是 jQuery 工具库之一。

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

  • 日期输入/日期输入.js
  • 覆盖/覆盖.js
  • 覆盖/覆盖.apple.js
  • 范围输入/范围输入.js
  • 可滚动/可滚动的.js
  • 可滚动/可滚动.autoscroll.js
  • 可滚动/可滚动的.navigator.js
  • 选项卡/tabs.js
  • 选项卡/tabs.slideshow.js
  • 工具箱/工具箱.expose.js
  • 工具箱/toolbox.flashembed.js
  • 工具箱/toolbox.history.js
  • 工具箱/工具箱.mousewheel.js
  • 工具提示/工具提示.js
  • 工具提示/工具提示.dynamic.js
  • 工具提示/工具提示.slide.js
  • 验证器/validator.js

更好地加载包含 dateinput、rangeinput 和验证器工具的 form/jquery.tools.min.js。(19.3 kB) + jQuery 库。

<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/

如果您想单独使用范围输入，最好尝试任何其他单独提供范围输入功能的插件。您可以使用以下两个插件中的任何一个并节省超过 10KB。

  1. slideControl.js - http://nikorablin.com/slideControl/
  2. jQuery 简单滑块 - http://loopj.com/jquery-simple-slider/
于 2013-06-26T08:50:46.933 回答
1

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

于 2013-06-25T10:06:41.060 回答
1

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

这意味着您有 2 个选择：

  • 例如，在使用 CDN 链接之前下载自定义版本的 JQueryTools 并包含 JQuery 库
  • 下载自定义版本的 JQueryTools，包括这样的 JQuery 库：

在此处输入图像描述

于 2013-06-30T20:55:56.100 回答