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>

实例化 Bootstrap Colorpicker

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

完整实例:


<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 Demoh1>
    <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

你可能感兴趣的:(jquery,Bootstrap,前端,Bootstrap,Colorpicker,jquery颜色选择器)