html 颜色选择器 亲测,很好用
@*以下 是测试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 颜色选择器 亲测,很好用的更多相关文章
- php时间选择器亲测可以自己修改
由于前端的离职 造成我需要自己去做后台页面 所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...
- 贼溜的更新Android-SDK的方法(亲测很好用)
启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口:在『Androi ...
- 【iOS13问题】修改状态栏的颜色(亲测,有效)
- (UIStatusBarStyle)preferredStatusBarStyle { if (@available(iOS 13.0, *)) { return UIStatusBarStyle ...
- 获取UIColor中的RGB值(本人亲测多个获取RGB值的方法,这个最有效)
在自己研发的项目个人项目中,碰到一个从颜色中获取RGB值的需求. 在网上找了许久,也有一些方法可以获取RGB值,但不能获取黑白以及灰色的值(他们是非RGB颜色空间,不清楚什么意思,反正亲测确实获取不了 ...
- osg for android学习之一:windows下编译(亲测通过)【转】
1. 首先需要一个OSG for android的环境 (1)NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一):新 ...
- nginx代理https站点(亲测)
nginx代理https站点(亲测) 首先,我相信大家已经搞定了nginx正常代理http站点的方法,下面重点介绍代理https站点的配置方法,以及注意事项,因为目前大部分站点有转换https的需要所 ...
- UWP 颜色选择器(ColorPicker) 和 自定义的Flyout(AdvancedFlyout)
ColorPicker 故事背景 项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...
- 推荐几个最好用的CRM软件,本人亲测
CRM是英文Customer Relationship Management 的简写,一般译作“客户关系管理”.CRM最早产生于美国,由Gartner Group 首先提出的CRM这个概念的.20世纪 ...
- 【转】Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本的开发环境(亲测)
http://blog.csdn.net/ccf19881030/article/details/9204801 很久以前使用博客园博主子龙山人的一篇博文<Cocos2d-x win7+vs20 ...
随机推荐
- S 实现精确加减乘除
//加法函数 function accAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[ ...
- telnet的安装和使用
在日常使用中,有时候需要检测服务器上面的部分端口有没有打开,这个时候可以使用telnet进行调试.下面是一篇转载的文章. 原文地址:http://linuxtech.blog.51cto.com/36 ...
- django扩展User认证系统
第一种方法proxy 如果你对Django提供的字段,以及验证的方法都比较满意,没有什么需要改的.但是只是需要在他原有的基础之上增加一些操作的方法.那么建议使用这种方式.示例代码如下: #在model ...
- .Wait()与.GetAwaiter()之间有什么区别
两者都是同步等待操作的结果差异主要在于处理异常.使用Wait,异常堆栈跟踪不会改变并表示异常时的实际堆栈,因此如果您有一段代码在线程池线程上运行,那么您将拥有类似的堆栈 ThreadPoolThrea ...
- JavaSE核心之一:Date类、Calendar类、Math类、枚举;
1.Date类 1) java.util.Date类用于封装日期及时间信息,一般仅用它显示某个日期,不对他作任何操作处理,作处理用Calendar类,计算方便. 2) Date 类本质上拥有一个lon ...
- Android 开发工具方法整理
1. 获取当前手机系统语言 Locale.getDefault().getLanguage(); 2. 获取当前手机系统版本号 android.os.Build.VERSION.RELEASE; 3. ...
- 通过用jQuery写一个页面,我学到了什么
概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...
- Java 实现 HDFS 文件基本操作
1. pom <hadoop.version>2.7.3</hadoop.version> <dependency> <groupId>org.apac ...
- 【BJOI2019】排兵布阵 DP
题目大意:有$n$座城堡,$s$轮游戏. 对于第$x$轮,第i座城堡的士兵数量为$a[x][i]$. 如果你需要攻下第i座城堡,你在第i座城堡部署的士兵必须严格大于$2a[x][i]$,如果攻下了你会 ...
- [P4318] 完全平方数
想不出什么办法能直接算的(别跟我提分块打表),不如二分答案吧:设\(f(x)=\sum_{i=1}^n [i不是"完全平方数"]\), 显然f(x)与x正相关.再结合筛法.容斥,不 ...