我无法让光谱颜色选择器工作。我错过了什么?
I cannot get the spectrum color picker to work. What am I missing?
回复:http://jsfiddle.net/bgrins/ctkY3/
我很茫然。我无法让这个颜色选择器(或任何颜色选择器)工作。
以下是测试页的总HTML内容。
我有 jquery 链接。
据我所知,链接上的路径是正确的(.js 和 .css)。
我还尝试将内联初始化包装在“$(document).ready(function()”中,但这没有帮助。我得到的只是常规文本框。它在多个浏览器上对我不起作用,和多个设备。
谁能看到我错过的东西?
这可能会很简单,我会感到尴尬,但我迫切希望得到一个好的颜色选择器。这是我试过的第三个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spectrum Color Picker - Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="include/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="include/spectrum/spectrum.css" />
<script>
$(".basic").spectrum({
color: "#f00",
change: function(color) {
$("#basic-log").text("change called: " + color.toHexString());
}
});
</script>
</head>
<body>
<h2>Basic Usage</h2>
<input type='text' class="basic"/>
<em id='basic-log'></em>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
</head>
<body>
<h2>Basic Usage</h2>
<input type='text' class="basic" />
<em id='basic-log'></em>
<script>
$(".basic").spectrum({
color: "#f00",
change: function (color) {
$("#basic-log").text("change called: " + color.toHexString());
}
});
</script>
</body>
</html>
这绝对有效,我唯一能想到的是 css
和 js
加载不正确。
**答案是双重的。
需要确保 "DOM READY"(文档已完全加载)是其中的一部分。在我的例子中,这是通过将内联初始化脚本放在底部,就在结束主体标记上方来完成的。它也可以通过将内联初始化包装在 "$(document).ready(function()"...
中来完成
此外,我在尝试 link JQuery 的非 SSL 版本时提供 SSL 页面的事实是另一部分。通过 linking JQuery 和 "httpS://"(<- 注意 S)它处理了它的第二部分!活到老,学到老!
再次感谢@NewToJS 和@AndySong,他们都为我提供了所需的答案。**
回复:http://jsfiddle.net/bgrins/ctkY3/
我很茫然。我无法让这个颜色选择器(或任何颜色选择器)工作。
以下是测试页的总HTML内容。
我有 jquery 链接。
据我所知,链接上的路径是正确的(.js 和 .css)。
我还尝试将内联初始化包装在“$(document).ready(function()”中,但这没有帮助。我得到的只是常规文本框。它在多个浏览器上对我不起作用,和多个设备。
谁能看到我错过的东西?
这可能会很简单,我会感到尴尬,但我迫切希望得到一个好的颜色选择器。这是我试过的第三个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spectrum Color Picker - Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="include/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="include/spectrum/spectrum.css" />
<script>
$(".basic").spectrum({
color: "#f00",
change: function(color) {
$("#basic-log").text("change called: " + color.toHexString());
}
});
</script>
</head>
<body>
<h2>Basic Usage</h2>
<input type='text' class="basic"/>
<em id='basic-log'></em>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
</head>
<body>
<h2>Basic Usage</h2>
<input type='text' class="basic" />
<em id='basic-log'></em>
<script>
$(".basic").spectrum({
color: "#f00",
change: function (color) {
$("#basic-log").text("change called: " + color.toHexString());
}
});
</script>
</body>
</html>
这绝对有效,我唯一能想到的是 css
和 js
加载不正确。
**答案是双重的。
需要确保 "DOM READY"(文档已完全加载)是其中的一部分。在我的例子中,这是通过将内联初始化脚本放在底部,就在结束主体标记上方来完成的。它也可以通过将内联初始化包装在 "$(document).ready(function()"...
中来完成
此外,我在尝试 link JQuery 的非 SSL 版本时提供 SSL 页面的事实是另一部分。通过 linking JQuery 和 "httpS://"(<- 注意 S)它处理了它的第二部分!活到老,学到老!
再次感谢@NewToJS 和@AndySong,他们都为我提供了所需的答案。**