Jay*_* D. 2 html css jquery twitter-bootstrap
我想为引导程序使用颜色选择器插件:https : //farbelous.io/bootstrap-colorpicker/index.html
它使用Bootstrap 4和Jquery
在尝试由开发人员在我的网站或JS Fiddle中发布的非常基本的代码示例时,颜色选择器无法正常工作(您应该在左侧看到一个可单击的正方形,并可以使用它来选择颜色)
我究竟做错了什么 ?我以为可能是导入无效,所以我使用了CDN,但它没有任何改变
<!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>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
848 次 |
| 最近记录: |