Bootstrap Colorpicker是一款基于Bootstrap的jquery颜色选择器插件。该jquery颜色选择器插件允许你选取颜色,它提供多种颜色格式:hex, rgb,rgba,hsl,hsla,并提供功能强大的API来控制颜色拾取器。
安装
可以通过npm或Yarn来安装bootstrap-colorpicker.js颜色拾取器插件。
npm install bootstrap-colorpicker yarn add bootstrap-colorpicker
使用方法
在页面中引入bootstrap,jquery和bootstrap-colorpicker.css以及bootstrap-colorpicker.js文件。
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
HTML结构
使用bootstrap-colorpicker.js颜色拾取器插件最基本的HTML结构如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet"> </head> <body> <div class="container"> <input id="mycp" type="text" class="form-control" /> </div> <script src="js/jquery.min.js"></script> <script src="dist/js/bootstrap-colorpicker.js"></script> <script> $(function () { $('#mycp').colorpicker(); }); </script> </body>
配置参数
该Bootstrap颜色选择器插件的默认配置参数如下:
// horizontal mode layout ? horizontal: false, // forces to show the colorpicker as an inline element inline: false, // forces a color color: false, // forces a format format: false, // children input selector input: 'input', // container selector container: false, // children component selector component: '.add-on, .input-group-addon', // Vertical sliders configuration sliders: { saturation: { maxLeft: 100, maxTop: 100, callLeft: 'setSaturation', callTop: 'setBrightness' }, hue: { maxLeft: 0, maxTop: 100, callLeft: false, callTop: 'setHue' }, alpha: { maxLeft: 0, maxTop: 100, callLeft: false, callTop: 'setAlpha' } }, // Horizontal sliders configuration slidersHorz: { saturation: { maxLeft: 100, maxTop: 100, callLeft: 'setSaturation', callTop: 'setBrightness' }, hue: { maxLeft: 100, maxTop: 0, callLeft: 'setHue', callTop: false }, alpha: { maxLeft: 100, maxTop: 0, callLeft: 'setAlpha', callTop: false } }, // Customizes the default colorpicker HTML template. template: '<div class="colorpicker dropdown-menu">' + '<div class="colorpicker-saturation"><i><b></b></i></div>' + '<div class="colorpicker-hue"><i></i></div>' + '<div class="colorpicker-alpha"><i></i></div>' + '<div class="colorpicker-color"><div /></div>' + '<div class="colorpicker-selectors"></div>' + '</div>', // By default, the colorpicker is aligned to the right of the input. // If you need to switch it to the left, set align to 'left'. align: 'right', // Adds this class to the colorpicker widget. customClass: null, colorSelectors: null
bootstrap-colorpicker.js颜色选择器插件的github地址为:https://github.com/farbelous/bootstrap-colorpicker
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!