zoukankan      html  css  js  c++  java
  • 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>*@

  • 相关阅读:
    一个很好的Delphi博客
    Android开发之adb无法连接
    J2EE--常见面试题总结 -- (二)
    J2EE--常见面试题总结 -- ( 一)
    面向接口编程实现不改代码实现Redis单机/集群之间的切换
    Gradle sync failed 异常
    Dubbo+Zookeeper
    JdbcTemplate的使用
    Spring -- 配置bean
    浅析 @PathVariable 和 @RequestParam(转发,非原创)
  • 原文地址:https://www.cnblogs.com/guzhengtao/p/20180816_1540.html
Copyright © 2011-2022 走看看