jQuery 滑块未知答案

【问题标题】：jQuery slider is unknownjQuery 滑块未知
【发布时间】：2012-02-05 23:26:56
【问题描述】：

这个滑块是如何工作的？

给出的来源什么也没显示

<style>
    #demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>
<div class="demo">
    <div id="slider"></div>
</div><!-- End demo -->

在添加之前我确实包含了 jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

但它给了我

SCRIPT438：对象不支持属性或方法“滑块”

错误。

这就是整个代码的样子

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <style>
            #demo-frame > div.demo { padding: 10px !important; }
        </style>

        <div class="demo">
            <div id="slider"></div>
        </div><!-- End demo -->

        <script>
        $(function() {
            $( "#slider" ).slider();
            });
        </script>
    </body>
</html>

我错过了什么？

【问题讨论】：

我找到了你的问题，查看我更新的答案。

标签： javascript jquery css jquery-ui jquery-ui-slider

【解决方案1】：

在添加之前我确实包含了 jquery

您确实包含了 jQuery...但您使用的是 jQuery ui 插件方法 - .slider() 没有引用 ui 插件。
所以slider这个方法对于javascript来说是未知的，

在 jQuery 库之后添加引用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

更新：

花了太多时间，我发现了你的问题，你错过了 JQuery ui css：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

JSFiddle DEMO

【讨论】：

@Sparky672（回复您现在已删除的评论）好吧...这似乎比我想象的要复杂。它在jqueryui.com/demos/slider 中没有说我需要图像：“jQuery UI Slider 插件使用 jQuery UI CSS 框架来设置其外观样式，包括颜色和背景纹理。”如果我需要额外的图像，我在哪里可以得到这些？还是我必须自己做？
@Nitin，我删除了我的最后一条评论，因为我认为您正在尝试构建图像/内容滑块。这是术语上的重叠，我没有仔细看是我的错。无视。

【解决方案2】：

您应该为滑块使用 jQuery UI。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>

【讨论】：

我想最好告诉你他的第二个问题是什么，他缺少 juqery ui css。
是的，这不是最简单的事情吗！为您的回答 +1！

【解决方案3】：

由于它是一个 jQuery UI 滑块，所以您缺少 jQuery UI，它需要在 jQuery 之后包含。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

【讨论】：

该网址有效try it
@gdoron：好的。它在技术上是有效的。我永远不会放弃这个计划，但这就是我。