Bootstrap Colorpicker基本示例不起作用 [英] Bootstrap colorpicker basic example does not work
问题描述
我想使用颜色选择器插件进行引导: https://farbelous.io/bootstrap-colorpicker/index.html
I would like to use a color picker plugin for bootstrap : https://farbelous.io/bootstrap-colorpicker/index.html
它使用引导程序4和Jquery
It uses bootstrap 4 and Jquery
在尝试由开发人员在我的网站或JS Fiddle中发布的非常基本的代码示例时，颜色选择器无法正常工作(您应该在左侧看到一个可单击的正方形，并且可以使用它)
When trying the very basic code example, published by the developer, in my website or in JS Fiddle, the color picker just does not work properly (you should see a clickable square on the left and be able to pick a color with it)
我在做什么错?我以为可能是导入无效，所以我使用了CDN，但没有任何改变
What am I doing wrong ? I thought it might be the imports that did not work, so I used CDNs but it does not change anything
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<h1>Bootstrap Colorpicker Demo</h1>
<input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
<script>
$(function () {
// Basic instantiation:
$('#demo').colorpicker();
// Example using an event, to change the color of the .jumbotron background:
$('#demo').on('colorpickerChange', function(event) {
$('.jumbotron').css('background-color', event.color.toString());
});
});
</script>
</body>
推荐答案
这是您代码的固定版本:已修复版本.
Here is fixed version of your code: Fixed version.
从CDN加载 jQuery 时出现问题.
There was a problem with loading jQuery from CDN.
Chrome返回错误:
Chrome returned error:
无法加载资源:服务器的响应状态为404.
Failed to load resource: the server responded with a status of 404.
因此，我重新添加了CDN，一切正常.
So I've re-added CDN and everything works fine.
这篇关于Bootstrap Colorpicker基本示例不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
