推荐一款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

随机推荐

IAR EWARM : Debugging with CMSIS-DAP
Unity3d学习笔记记录
1.发布到 ipad字体显示不出来,改变Position位置的Z轴为-1 2.发布打包有问题,记得用户权限有没有设置 3.ipad4分辨率:2048*1536 4.调整界面大小,尽量调整底下子对象位置 ...
基于开源SuperSocket实现客户端和服务端通信项目实战
一.课程介绍本期带给大家分享的是基于SuperSocket的项目实战,阿笨在实际工作中遇到的真实业务场景,请跟随阿笨的视角去如何实现打通B/S与C/S网络通讯,如果您对本期的<基于开源Supe ...
架构：The Onion Architecture : part 2（洋葱架构：第二篇）（转载）
原位地址:http://jeffreypalermo.com/blog/the-onion-architecture-part-2/. In part 1, I introduced an archi ...
Unity3D 的大场景内存优化
我们公司的一个 MMORPG 项目最近在内存方面碰到了红线,昨天开会讨论了一下.我提出了一个改进方案,写篇 blog 记录一下. 问题是这样的.在当下的手机及平板硬件设备条件下,操作系统留给应用的可用 ...
一个exception
今天调错,发生了一个错误:java.lang.IllegalStateException: ApplicationEventMulticaster not initialized [closed] 后 ...
Office Web Apps 错误日志
前言最近一直在用Office Web Apps,使用过程会有各种各样的错误,众所周知,sharepoint的错误都在15/Logs下面保存错误日志,那么OWA呢? 经过查找,发现Office Web ...
关于Java中的equals方法
关于Java中的equals方法欢迎转载,但是请填写本人的博客园原址https://www.cnblogs.com/JNovice/p/9347099.html 一.什么是equals方法 equa ...
python三大web框架Django,Flask,Flask，Python几种主流框架，13个Python web框架比较，2018年Python web五大主流框架
Python几种主流框架从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...
FreeMarker：Java模板引擎
本资源由伯乐在线 - 黄余粮整理 FreeMarker 是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写.FreeMarker被设计用来生成HTML Web页面,特别是基于M ...

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

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

随机推荐

热门专题