@*以下 是测试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. ios 学习路线总结

    学习方法 面对有难度的功能,不要忙着拒绝,而是挑战一下,学习更多知识. 尽量独立解决问题,而不是在遇到问题的第一想法是找人. 多学习别人开源的第三方库,能够开源的库一定有值得学习的地方,多去看别的大神 ...

  2. Linux 第十天

    十三.权限管理 1.ACL权限开启 1)dumpe2fs -h /dev/sda3查看分区ACL权限是否开启 -h:仅显示超级块中信息,而不显示磁盘块组的详细信息 2)mount -o remount ...

  3. 基于OpenCV的图书扫描识别程序开发

    1.AndroidStudio环境配置 https://www.cnblogs.com/little-monkey/p/7162340.html

  4. python闭包和延迟绑定

    一.什么是闭包: 1.函数内定义函数. 2.外函数的返回时内函数的引用. 3.内函数使用外函数的局部变量(至少一个). 1 def outfunc(): 2 for num in range(4): ...

  5. 2019swpuj2ee作业一:C/S,B/S的应用的区别

    1.硬件环境不同: C/S 一般建立在专用的网络上, 小范围里的网络环境, 局域网之间再通过专门服务器提供连接和数据交换服务.B/S 建立在广域网之上的, 不必是专门的网络硬件环境,例与电话上网,  ...

  6. java 基础--理论知识

    变量分:局部变量全局变量-----------------------------------------------------变量三大特性[标识符,初始值,作用域]定义变量:语法:[访问修饰符] ...

  7. No趴笨小分队

    这星期完成了小组的取名这一项重大的活动. 正所谓“名字是一个好开头”,取这个名义有以下的意义: 希望之后的学习以及工作能一帆风顺: 祝福各位小组成员之后的路能顺顺利利: 希望能在组员磨合的过程中可以愉 ...

  8. veri HDL modeisim仿真:test bench文件编写

    预编译指令: verilog HDL预编译指令是以" ' "字符开头,而且不需要以";"结尾. 作用:指示在编译verilog hdl源代码前,需要执行哪些操作 ...

  9. Nginx + Tomcat 在 Windows7 上搭建负载均衡集群

    一.安装Tomcat和Nginx 首先安装两个apache-tomcat-8.0.41,下载地址:http://tomcat.apache.org 并安装一个nginx-1.13.0,下载地址http ...

  10. javaScript 节流与防抖

    首先 我们要知道 节流与防抖可以干什么. 优化网络请求性能——节流 优化页面请求性能——防抖 举两个简单的小例子: 节流: 例如 有些购物页面,会有一些让你抢购的活动,到点的时候,需要你快速的点某个按 ...