为什么我的网页中没有包含/检测到这个 JQuery 颜色选择器插件？答案

【问题标题】：Why isn't this JQuery Color Picker plugin not getting included/detected in my webpage?为什么我的网页中没有包含/检测到这个 JQuery 颜色选择器插件？
【发布时间】：2016-04-28 05:54:27
【问题描述】：

JSFiddle here.

我正在尝试将this JQuery plugin (Github) 包含到我的网页中。但它似乎没有被包括在内。

我检查了this demo page，尤其是他们的<head> 标签以查看它们包含的内容，因此包括JQuery、tinycolor.js 和jquery.colorpickersliders.js（包括的其他scipts，如prettify.js 和bootstrap.js似乎没有效果 - 我通过从他们的演示中删除那些 <script> 标记来测试它）。

然后我使用他们tutorial/guide here 中的第一个示例代码sn-p，并使用它。 问题是它似乎不起作用。我错过了什么？

index.php:

<head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.css" />
    <script src="jquery-2.1.3.js"></script>
    <script src="jquery-colorpickersliders-master/libraries/tinycolor.js"></script>
    <script src="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
</head>

<body>
    <span class="hsl-demo">...</span>
    <script>
        $(".hsl-demo").colorPickerSliders({
            flat:true,
            previewformat:'hsl',
            order: {
                hsl : 1,
                preview : 2
            }
        });
    </script>
</body>

$(".hsl-demo").colorPickerSliders({
  
			flat:true,
  
			previewformat:'hsl',
  
			order: {
				hsl : 1,
				preview : 2
			}
  
});

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

<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>

<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/libraries/tinycolor.js"></script>

<link href="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.css" rel="stylesheet" />

<span class="hsl-demo">...</span>

编辑：

控制台的错误是：

Timestamp: 4/28/2016 11:05:52 AM
Error: TypeError: $(...).colorPickerSliders is not a function
Source File: http://localhost/Tests/Test1/index.php
Line: 17

第 17 行是<body> 标记中<script> 标记的开头。

编辑 2：

【问题讨论】：

@GauravAggarwal 刚刚将其复制粘贴到问题中。请参阅问题底部的编辑。
在你摆弄包含文件的链接不合适...
@GauravAggarwal 为什么不呢？其次，我从 Github 下载了整个存档，然后编写了一个测试网页。我将这些文件放在目录中。不工作。
但尝试在新窗口中打开链接它会打开 github 页面而不是源文件
@GauravAggarwal 哦，是的，它们是 Github 链接。如何找到源文件的链接？（对不起，我的错）

标签： javascript jquery jquery-plugins color-picker jquery-color

【解决方案1】：

尝试将colorPickerSlider中的'c'大写以制作代码

$(".hsl-demo").ColorPickerSliders({
    flat:true,
    previewformat:'hsl',
    order: {
        hsl : 1,
        preview : 2
    }
});

注意：永远不要尝试直接包含来自 github repo 的库，因为资源是通过网络从 github repo 读取为 text/html 的。而是尝试使用 CDN 中的资源。

Live Demo @ JSFiddle

【讨论】：

我只是不知道人们如何找到 CDN 链接。你能告诉我如何找到这个插件的 CDN 链接吗？
其次，您的演示似乎不起作用。它在输出中显示相同的三个点（而不是颜色选择器）=（在问题中发布了屏幕截图