欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

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>
  • 1

  • 2

  • 3

  • 4

实例化 Bootstrap Colorpicker

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

  • 2

完整实例:

<!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>
  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11

  • 12

  • 13

  • 14

  • 15

  • 16

  • 17

  • 18

  • 19

  • 20

  • 21

  • 22

  • 23

  • 24

  • 25

  • 26

  • 27

  • 28

  • 29

  • 30

  • 31

  • 32

  • 33

  • 34

  • 35

  • 36

  • 37

  • 38

  • 39

  • 40

  • 41

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

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


普通分类: