jquery颜色选择器--------Bootstrap Colorpicker 初体验

莫典
2023-12-01

Bootstrap Colorpicker是一款基于Bootstrap的jquery颜色选择器插件。
所以,在页面中引入bootstrap,jquery和bootstrap-colorpicker.css以及bootstrap-colorpicker.js文件。

<link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="../css/bootstrap-colorpicker.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-colorpicker.js"></script>

实例化 Bootstrap Colorpicker

//实例化
$('#demo').colorpicker();

完整实例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>bootStrap-colorpicker 插件测试</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="../css/bootstrap-colorpicker.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-colorpicker.js"></script>
    <style>
        input {
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
            border-radius: 4px;
            background-color:#fff;
            text-indent: 20px;;
        }
    </style>
</head>
<body>
<div class="jumbotron">
    <h1>Bootstrap Colorpicker Demo</h1>
    <p>选择的颜色:<span id="color"></span></p>
    <p>点击选择颜色:<input id="demo" type="text" value="" readonly/></p>
</div>
<script>
    $(function () {
        // 基本实例化:
        $('#demo').colorpicker();
        // 添加change事件 改变背景色
        $('#demo').on('change', function (event) {
            $('#demo').css('background-color', event.color.toString()).val('');
            $("#color").text(event.color.toString());
        });
    });
</script>
</body>
</html>

bootstrap-colorpicker.js颜色选择器插件的github地址为:https://github.com/farbelous/bootstrap-colorpicker

demo下载地址:https://pan.baidu.com/s/10GlSC5nDfdTUxb0d0jYNZg

 类似资料: