jQuery颜色选取器插件COLPICK
来源:互联网 发布:智能网络平板电视 编辑:程序博客网 时间:2024/06/05 13:27
插件官网:http://www.jq22.com/jquery-info367
下载该插件和 colpick.js 和 colpick.css 添加到您的文档的头:
<script src="js/colpick.js" type="text/javascript"></script><link rel="stylesheet" href="css/colpick.css" type="text/css"/>
现在你可能会在任何 jQuery 对象来创建一个颜色选取器上调用colpick方法。默认情况下您获取下拉列表颜色选择器:
html
<button id="picker">Show Color Picker</button>
js
$('#picker').colpick();
选项
传递给 colpick 函数作为对象的几个选项允许您自定义颜色选择器。例如,传递flat:true使颜色选取器总是可见的如下面的示例。
html
<div id="picker"></div>
JS
$('#picker').colpick({ flat:true, layout:'hex', submit:0});
All the available options are:
- HSB object (eg. {h:0, s:100, b:100})
- HEX string (with no #)
- RGB object(eg. {r:255, g:0, b:0})
- el element, the parent element on which colorpicker() was called. Use it to modify this parent element on change (see first example below).
- bySetColor flag: if true, the onChange callback was fired by the colpickSetColor function and not by the user changing the color directly in the picker. There are some cases in which you'll want a different behaviour in this case (see last example).
submit:0
option.jQuery.fn Functions
These functions are the color picker's interface. Use them to control the color picker externally, but not to get color values. To retrieve color values from the picker use theonSubmit and onChange callbacks.
- col: a hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b:50})
- setCurrent: If true the color picker's current color (the one to the right in layouts with submit button) is set in addition to the new color, which is always set.
jQuery Functions
The following functions are used internally by the color picker. However, they may also be required as utility functions by your application. They are made available as jQuery functions:
例子:
$(function(){$('#picker01').colpick({flat:true});$('#picker02').colpick({flat:true,colorScheme:'dark'});$('#picker1').colpick();$('#picker2').colpick({flat:true,layout:'hex',submit:0});$('#picker3').colpick({layout:'hex',colorScheme:'dark',submit:0,onChange:function(hsb,hex,rgb,el,bySetColor) {$(el).css('border-color','#'+hex);// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.if(!bySetColor) $(el).val(hex);}}).keyup(function(){$(this).colpickSetColor(this.value);});$('.ex-color-box').colpick({colorScheme:'dark',layout:'rgbhex',color:'ff8800',livePreview:0,onSubmit:function(hsb,hex,rgb,el) {$(el).css('background-color', '#'+hex);$(el).colpickHide();}}).css('background-color', '#ff8800');});
0 0
- jQuery颜色选取器插件COLPICK
- colpick-jQuery颜色选择器插件
- 推荐个Jquery颜色选择控件 jquery colpick..用来设置背景不错。
- jQuery滑动选取数值范围插件
- jQuery插件jcDate日期时间选取
- 选取颜色
- Jquery颜色选择插件使用
- jquery自定义插件(颜色)
- 25个有用的jQuery日历和日期选取插件
- 25个超棒的jQuery日历和日期选取插件(1)
- 25个有用的jQuery日历和日期选取插件
- 25个超棒的jQuery日历和日期选取插件
- 移动优先的实用jQuery颜色拾取器插件
- 适合移动设备的小巧jQuery颜色拾取器插件
- jQuery插件] jQuery Color Animations颜色动画插件
- 颜色选取 日期选择
- 定义颜色选取类
- 颜色选取网站
- 解决iframe跨域问题
- jquery中Form相关操作
- libpng error: Not a PNG file Error Showing In Android Studio
- opencv的ROI的提取
- [Widget]StateFrameLayout-状态帧布局
- jQuery颜色选取器插件COLPICK
- javascript 奇淫巧技44招
- java集合框架解析
- ROW_NUMBER() OVER函数的基本用法用法
- elasticsearch同步mongodb
- 一个比较给力的网站
- android开发过程中的性能优化自己整理
- 关于websocket的原理
- android权限最新大全