推荐一款jQuery ColorPicked 颜色拾取器插件

先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^.

官网地址：http://www.eyecon.ro/colorpicker/#about

代码SVN 地址：https://github.com/Belelros/jQuery-ColorPicker.git

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <script src="static/js/jquery.min.js"></script>

    <script src="static/js/colorpicker.min.js"></script>

    <link rel="stylesheet" href="static/css/color Pick.css">

</head>

<body>

<input type="text" value="" id="picker" style="height:32px;width:100px;border:1px solid #B6B4B6;" readonly></input>

<script type="text/javascript">

    $('#picker').ColorPicker({

        layout:'rgbhex',

        color:'ff8800',

        onSubmit:function(hsb,hex,rgb,el) {

            $(el).css('background-color', '#'+hex);

            $(el).ColorPickerHide();

        }

    });

</script>

</body>

</html>

.colorpicker {

    width: 350px;

    height: 170px;

    overflow: hidden;

    position: absolute;

    font-family: Arial, Helvetica, sans-serif;

    display: none;

    z-index:;

    border:3px solid #BABABA;

    background-color:#121212;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

.colorpicker input {

    line-height: normal;

    width: auto;

}

.colorpicker_color {

    width: 150px;

    height: 150px;

    left: 9px;

    top: 8px;

    position: absolute;

    background: #f00;

    overflow: hidden;

    cursor: crosshair;

    border: 2px solid #474848;

}

.colorpicker_color div {

    position: absolute;

    top:;

    left:;

    width: 150px;

    height: 150px;

    background: url("images/overlay.png");

}

.colorpicker_color div div {

    position: absolute;

    top:;

    left:;

    width: 11px;

    height: 11px;

    overflow: hidden;

    background: url("images/select.gif");

    margin: -5px 0 0 -5px;

}

.colorpicker_hue {

    position: absolute;

    top: 8px;

    left: 175px;

    width: 17px;

    height: 150px;

    cursor: n-resize;

    background: url("images/select_hue.png");

    border: 2px solid #474848;

}

.colorpicker_hue div {

    position: absolute;

    width: 35px;

    height: 9px;

    overflow: hidden;

    margin: -4px 0 0 0;

    left: -9px;

}

.colorpicker_new_color {

    position: absolute;

    width: 60px;

    height: 30px;

    left: 208px;

    top: 8px;

    background: #f00;

    border: 2px solid #474848;

}

.colorpicker_current_color {

    position: absolute;

    width: 60px;

    height: 30px;

    left: 278px;

    top: 8px;

    background: #f00;

    border: 2px solid #474848;

}

.colorpicker input {

    background-color: transparent;

    border: 1px solid transparent;

    position: absolute;

    font-size: 10px;

    font-family: Arial, Helvetica, sans-serif;

    color: #898989;

    top: 2px;

    right: 10px;

    text-align: right;

    margin:;

    padding:;

    height: 13px;

    width: 30px;

    border: 1px solid #2f2f2f;

    background-color:  #121212;

}

.colorpicker_hex {

    position: absolute;

    width: 62px;

    height: 20px;

    left: 209px;

    top: 139px;

}

.colorpicker_hex input {

    right: 0px;

    width: 47px;

    float:right;

}

.colorpicker_field, .colorpicker_hex {

    border: 1px solid #2f2f2f;

}

.colorpicker_field {

    height: 20px;

    width: 60px;

    background-position: top;

    position: absolute;

}

.colorpicker_focus input {

    border: 1px solid #4d4b4b;

}

.colorpicker_field label, .colorpicker_hex label {

    color: #D8D8D8;

    font-size:  11px;

    text-shadow: none;

    display: block;

    margin-top: 2px;

    margin-left: 5px;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: -moz-none;

    -ms-user-select: none;

    -o-user-select: none;

    user-select: none;

}

.colorpicker_rgb_r {

    top: 49px;

    left: 209px;

}

.colorpicker_rgb_g {

    top: 79px;

    left: 209px;

}

.colorpicker_rgb_b {

    top: 109px;

    left: 209px;

}

.colorpicker_hsb_h {

    top: 49px;

    left: 279px;

}

.colorpicker_hsb_s {

    top: 79px;

    left: 279px;

}

.colorpicker_hsb_b {

    top: 109px;

    left: 279px;

}

.colorpicker_submit {

    position: absolute;

    width: 62px;

    height: 19px;

    background: url("images/submit.png") top;

    bottom: 10px;

    right: 8px;

    overflow: hidden;

    cursor:pointer;

}

.colorpicker_focus{

    background: url("images/submit.png") 0px -19px;

}

demo

技术交流QQ群：15129679

随机推荐

muduo 的 shutdown() 没有直接关闭 TCP 连接？
http://blog.csdn.net/Solstice/article/details/6208634 今天收到一位网友来信: 在 simple 中的 daytime 示例中,服务端主动关闭时调用 ...
stm32 优先级说明
抢占优先级和响应优先级.事实上是一个中断所包括的两个优先级,当中前者是对抢占优先级的级别划分,后者是同样抢占优先级的优先级别的划分. 比方: 中断A抢占优先级比B高,那么A的中断能够在B里面触发,忽略 ...
delphi Image处理
procedure ImageDrawText(ATextEdo: IGGCCADTextEDO); var oImageBitmap: TBitmap; x1,x2,y1,y2: double; b ...
最简单的例子理解Javascript闭包
理解Javascript的闭包非常关键,本篇试图用最简单的例子理解此概念. function greet(sth){ return function(name){ console.log(sth + ...
Delphi实例分析：远程传输数据和文件
在Windows操作系统的平台上,WinSock是首选的网络编程接口,用于在网络上传输数据和交换信息,它构成了Windows操作系统进行网络编程的基础.对于编写网络应用程序来说,WinSock是一门非 ...
ArcGIS Engine Maplex Label（标注）使用一例（转)
/// <summary> /// MaplexEngine标注 /// </summary> /// <param name="pGeoFeatLyr&quo ...
AES加解密算法在Android中的应用及Android4.2以上版本调用问题
from://http://blog.csdn.net/xinzheng_wang/article/details/9159969 AES加解密算法在Android中的应用及Android4.2以上 ...
.NET：注意 Primitive 这个小坑
背景有个需求,需要递归遍历类型的所有属性(属性的属性),然后对不同的类型做不同的处理,或者只是将类型分为三类:Primitive.Complex 和 Collection.因为 MS 的 Type ...
PL/SQL报错：Initialization error Oracle client not properly installed
安装PL/SQL8.4后,连接数据库提示错误Initialization error Oracle client not properly installed 解决方案: 1.下载instancec ...
Java中的线程实现
线程实现有两种方法: 1.写一个类来继承Thread类,然后复写run()方法. public class HelloThread extends Thread { public void run() ...

推荐一款jQuery ColorPicked 颜色拾取器插件

推荐一款jQuery ColorPicked 颜色拾取器插件的更多相关文章

随机推荐

热门专题