@*以下 是测试html 颜色选择器的*@

@*<a href="#" mce_href="#" onclick="initColorPicker('demo'); return false" id="demo" style="position:absolute;left:200px">颜色选择</a>*@
<!-- Color Picker -->
@*<script type="text/JavaScript">
var colorPicker = function (idStr) {
this.colorPool = ["#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00FFFF", "#00CCFF", "#993366", "#CCCCCC", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", "#FFFFFF"];
this.initialize(idStr);
}
colorPicker.prototype = {
initialize: function (idStr) {
var count = 0;
var html = '';
var self = this;
html += '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >';
// html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>';
for (i = 0; i < 5; i++) {
html += "<tr>";
for (j = 0; j < 8; j++) {
html += '<td align="center" width="20" height="20" style="background:' + this.colorPool[count] + '" mce_style="background:' + this.colorPool[count] + '" unselectable="on"> </td>';
count++;
}
html += "</tr>";
}
html += '</table>';
this.trigger = document.getElementById(idStr);
this.div = document.createElement('div');
this.div.innerHTML = html;
var tds = this.div.getElementsByTagName('td');
for (var i = 0, l = tds.length; i < l; i++) {
tds[i].onclick = function () {
self.setColor(this.style.backgroundColor, idStr);
}
}
this.div.id = 'myColorPicker';
this.trigger.parentNode.appendChild(this.div);
this.div.style.position = 'absolute';
this.div.style.left = this.trigger.offsetLeft + 'px'
this.div.style.top = (this.trigger.clientHeight + this.trigger.offsetTop) + 'px';
//this.hide();
this.trigger.onclick = function () {
if (self.div.style.display == 'none') {
self.show();
return false;
} else {
self.hide();
return false;
}
}
},
setColor: function (c, idStr) {
this.hide();
// document.getElementById(idStr).style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能
document.getElementById(idStr).style.color = c
//var rgb2Hex = colorRGB2Hex(c);
//alert(rgb2Hex);
},
hide: function () {
this.div.style.display = 'none'
},
show: function () {
this.div.style.display = 'block'
}
}
function initColorPicker(str) {
picker = new colorPicker(str);
}
function colorRGB2Hex(color) {
var rgb = color.split(',');
var r = parseInt(rgb[0].split('(')[1]);
var g = parseInt(rgb[1]);
var b = parseInt(rgb[2].split(')')[0]);

var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
}
</script>*@

html 颜色选择器 亲测,很好用的更多相关文章

  1. php时间选择器亲测可以自己修改

    由于前端的离职  造成我需要自己去做后台页面   所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...

  2. 贼溜的更新Android-SDK的方法(亲测很好用)

    启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口:在『Androi ...

  3. 【iOS13问题】修改状态栏的颜色(亲测,有效)

    - (UIStatusBarStyle)preferredStatusBarStyle { if (@available(iOS 13.0, *)) { return UIStatusBarStyle ...

  4. 获取UIColor中的RGB值(本人亲测多个获取RGB值的方法,这个最有效)

    在自己研发的项目个人项目中,碰到一个从颜色中获取RGB值的需求. 在网上找了许久,也有一些方法可以获取RGB值,但不能获取黑白以及灰色的值(他们是非RGB颜色空间,不清楚什么意思,反正亲测确实获取不了 ...

  5. osg for android学习之一:windows下编译(亲测通过)【转】

    1. 首先需要一个OSG for android的环境 (1)NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一):新 ...

  6. nginx代理https站点(亲测)

    nginx代理https站点(亲测) 首先,我相信大家已经搞定了nginx正常代理http站点的方法,下面重点介绍代理https站点的配置方法,以及注意事项,因为目前大部分站点有转换https的需要所 ...

  7. UWP 颜色选择器(ColorPicker) 和 自定义的Flyout(AdvancedFlyout)

    ColorPicker 故事背景 项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...

  8. 推荐几个最好用的CRM软件,本人亲测

    CRM是英文Customer Relationship Management 的简写,一般译作“客户关系管理”.CRM最早产生于美国,由Gartner Group 首先提出的CRM这个概念的.20世纪 ...

  9. 【转】Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本的开发环境(亲测)

    http://blog.csdn.net/ccf19881030/article/details/9204801 很久以前使用博客园博主子龙山人的一篇博文<Cocos2d-x win7+vs20 ...

随机推荐

  1. HTML语言

    复习: 1.Web项目的部署结构  静态Web技术(客户端技术):提供的内容任何人在任何时间访问都是一样的 HTML/CSS/JS/Flash.... 动态Web技术(服务器端技术):提供的内容不同人 ...

  2. Codesmith怎么判断sqlserver数据库字段是不是标识自增字段

    Codesmith怎么判断sqlserver数据库字段是不是标识自增字段 使用ExtendedProperty扩展信息判断 CS_isIdentity:是否为标识符,不支持Access CS_isCo ...

  3. Do More With These Great Plugins for Windows Live Writer(old)

    This article is out of day,now we use open live wirter, but we don’t have so much works great plugin ...

  4. 关于java集合的一些操作

    1.数组转集合 java提供了一个方法:Arrays.asList(T... a)的方法. 测试: String[] arr = {"Lida","huanda" ...

  5. 锚接口(下)——html5的history api

    概述 虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法,但是很多老式的浏览器并不支持它,所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange ...

  6. HttpRunnerManager接口测试平台部署在服务器上(Centos + python3.6 + Mysql5.7 + uwsgi + nginx)

    整个思路:HttpRunnerManager + python3.6 + Mysql5.7 + uwsgi + nginx 安装依赖环境,将源代码传到服务器,修改settings,增加uwsgi配置, ...

  7. linux内核中GNU C __attribute__ 机制的实用

    很多东西,只看看是不行的,要想深入的去了解一个东西,一定要去不断地学习,实践,反思. 说白了就是要去打磨. 在linux中,最近遇到了这样一个定义: int board_usb_init(int in ...

  8. Spring.Net封闭业务类为WebService注意点和问题

    最近遇到的一个项目中用到了标题所说的方法,用Spring.Net将业务类封闭成WebService供其它地方调用使用,感觉还是蛮新鲜的,于是在园子中搜了一篇园友写的文章(这里)自己也尝试着搭了一个环境 ...

  9. Liferay7 BPM门户开发之24: Liferay7应用程序安全

    整理中...... Resources, Roles, and PermissionsPortal Access Control List (PACL) Custom SSO Providers Au ...

  10. linux中一些简便的命令之wc

    wc命令是统计文本中的字符数.单词数以及文本行数的,具体参数如下: -l 统计文本中的行数 -w 统计文本中的单词数 -c/m 统计文本中的字符数 -L 统计文本中最长行的字符数 当然使用时也可以不带 ...