HTML/CSS/JS/jQuery：颜色“表格”/“网格”

Question

我正在尝试构建一个颜色表，就像 MS Office 字体颜色网格一样。最好的方法是什么？表格、div 还是 ul？

我目前使用了一个 div，但我很难将它放在一个 ul 中，这是我的菜单。

HTML

<div id="color">

<table id="colorgrid">

    <tr>

        <td class="cell" style="background-color: #FFFF00;"></td>

        <td class="cell" style="background-color: #7CFC00;"></td>

        <td class="cell" style="background-color: #40E0D0;"></td>

    </tr>

    <tr>

        <td class="cell" style="background-color: #9400D3;"></td>

        <td class="cell" style="background-color: #FF0000;"></td>

        <td class="cell" style="background-color: #FF00FF;"></td>

    </tr>

</table> <!--End of colorgrid -->               

CSS

#colorgrid{

width: 85px;

height: 45px;

display: none;

position: absolute;

z-index: 3;

}

.row{

}

.cell{

float: left;

border: 1pt gray solid;

margin: 1px;

overflow: hidden;

width: 20px;

height: 20px;

}

JS/jQuery

​​>

$(document).ready(function(){       

$('#btn').click(function(){

    $('.backdrop').css('display', 'block');

    $('#colorgrid').css('display', 'block');


    $('.backdrop').click(function(){

        $('#colorgrid').css('display', 'none');

        $('.backdrop').css('display', 'none');

    });



    $('.cell').click(function(){

        var color = $(this).css('background-color');

        alert(color);

        $('#colorgrid').css('display', 'none');

        $('.backdrop').css('display', 'none');

    });

});

这段代码有效，我只是想要一个意见，给这只猫剥皮最好的方法是什么？ :-)

附： btn 在 li

谢谢，

杰伊

Answer 1

我玩了一下理查德的解决方案.. ES6、工具提示和没有 JQuery

const colours = [
  { name:'white', hex:'#FFFFFF' },
  { name:'snow', hex:'#FFFAFA' },
  { name:'honeydew', hex:'#F0FFF0' },
  { name:'mintcream', hex:'#F5FFFA' },
  { name:'azure', hex:'#F0FFFF' },
  { name:'aliceblue', hex:'#F0F8FF' },
  { name:'ghostwhite', hex:'#F8F8FF' },
  { name:'whitesmoke', hex:'#F5F5F5' },
  { name:'seashell', hex:'#FFF5EE' },
  { name:'beige', hex:'#F5F5DC' },
  { name:'oldlace', hex:'#FDF5E6' },
  { name:'floralwhite', hex:'#FFFAF0' },
  { name:'ivory', hex:'#FFFFF0' },
  { name:'antiquewhite', hex:'#FAEBD7' },
  { name:'linen', hex:'#FAF0E6' },
  { name:'lavenderblush', hex:'#FFF0F5' },
  { name:'mistyrose', hex:'#FFE4E1' },
  { name:'gainsboro', hex:'#DCDCDC' },
  { name:'lightgray', hex:'#D3D3D3' },
  { name:'silver', hex:'#C0C0C0' },
  { name:'darkgray', hex:'#A9A9A9' },
  { name:'gray', hex:'#808080' },
  { name:'dimgray', hex:'#696969' },
  { name:'lightslategray', hex:'#778899' },
  { name:'slategray', hex:'#708090' },
  { name:'darkslategray', hex:'#2F4F4F' },
  { name:'black', hex:'#000000' },
  { name:'cornsilk', hex:'#FFF8DC' },
  { name:'blanchedalmond', hex:'#FFEBCD' },
  { name:'bisque', hex:'#FFE4C4' },
  { name:'navajowhite', hex:'#FFDEAD' },
  { name:'wheat', hex:'#F5DEB3' },
  { name:'burlywood', hex:'#DEB887' },
  { name:'tan', hex:'#D2B48C' },
  { name:'rosybrown', hex:'#BC8F8F' },
  { name:'sandybrown', hex:'#F4A460' },
  { name:'goldenrod', hex:'#DAA520' },
  { name:'peru', hex:'#CD853F' },
  { name:'chocolate', hex:'#D2691E' },
  { name:'saddlebrown', hex:'#8B4513' },
  { name:'sienna', hex:'#A0522D' },
  { name:'brown', hex:'#A52A2A' },
  { name:'maroon', hex:'#800000' },
  { name:'lightyellow', hex:'#FFFFE0' },
  { name:'lemonchiffon', hex:'#FFFACD' },
  { name:'lightgoldenrodyellow', hex:'#FAFAD2' },
  { name:'papayawhip', hex:'#FFEFD5' },
  { name:'moccasin', hex:'#FFE4B5' },
  { name:'peachpuff', hex:'#FFDAB9' },
  { name:'palegoldenrod', hex:'#EEE8AA' },
  { name:'khaki', hex:'#F0E68C' },
  { name:'darkkhaki', hex:'#BDB76B' },
  { name:'yellow', hex:'#FFFF00' },
  { name:'lightsalmon', hex:'#FFA07A' },
  { name:'salmon', hex:'#FA8072' },
  { name:'darksalmon', hex:'#E9967A' },
  { name:'lightcoral', hex:'#F08080' },
  { name:'indianred', hex:'#CD5C5C' },
  { name:'crimson', hex:'#DC143C' },
  { name:'firebrick', hex:'#B22222' },
  { name:'red', hex:'#FF0000' },
  { name:'darkred', hex:'#8B0000' },
  { name:'coral', hex:'#FF7F50' },
  { name:'tomato', hex:'#FF6347' },
  { name:'orangered', hex:'#FF4500' },
  { name:'gold', hex:'#FFD700' },
  { name:'orange', hex:'#FFA500' },
  { name:'darkorange', hex:'#FF8C00' },
  { name:'lawngreen', hex:'#7CFC00' },
  { name:'chartreuse', hex:'#7FFF00' },
  { name:'limegreen', hex:'#32CD32' },
  { name:'lime', hex:'#00FF00' },
  { name:'forestgreen', hex:'#228B22' },
  { name:'green', hex:'#008000' },
  { name:'darkgreen', hex:'#006400' },
  { name:'greenyellow', hex:'#ADFF2F' },
  { name:'yellowgreen', hex:'#9ACD32' },
  { name:'springgreen', hex:'#00FF7F' },
  { name:'mediumspringgreen', hex:'#00FA9A' },
  { name:'lightgreen', hex:'#90EE90' },
  { name:'palegreen', hex:'#98FB98' },
  { name:'darkseagreen', hex:'#8FBC8F' },
  { name:'mediumseagreen', hex:'#3CB371' },
  { name:'seagreen', hex:'#2E8B57' },
  { name:'olive', hex:'#808000' },
  { name:'darkolivegreen', hex:'#556B2F' },
  { name:'olivedrab', hex:'#6B8E23' },
  { name:'lightcyan', hex:'#E0FFFF' },
  { name:'cyan', hex:'#00FFFF' },
  { name:'aqua', hex:'#00FFFF' },
  { name:'aquamarine', hex:'#7FFFD4' },
  { name:'mediumaquamarine', hex:'#66CDAA' },
  { name:'paleturquoise', hex:'#AFEEEE' },
  { name:'turquoise', hex:'#40E0D0' },
  { name:'mediumturquoise', hex:'#48D1CC' },
  { name:'darkturquoise', hex:'#00CED1' },
  { name:'lightseagreen', hex:'#20B2AA' },
  { name:'cadetblue', hex:'#5F9EA0' },
  { name:'darkcyan', hex:'#008B8B' },
  { name:'teal', hex:'#008080' },
  { name:'powderblue', hex:'#B0E0E6' },
  { name:'lightblue', hex:'#ADD8E6' },
  { name:'lightskyblue', hex:'#87CEFA' },
  { name:'skyblue', hex:'#87CEEB' },
  { name:'deepskyblue', hex:'#00BFFF' },
  { name:'lightsteelblue', hex:'#B0C4DE' },
  { name:'dodgerblue', hex:'#1E90FF' },
  { name:'cornflowerblue', hex:'#6495ED' },
  { name:'steelblue', hex:'#4682B4' },
  { name:'royalblue', hex:'#4169E1' },
  { name:'blue', hex:'#0000FF' },
  { name:'mediumblue', hex:'#0000CD' },
  { name:'darkblue', hex:'#00008B' },
  { name:'navy', hex:'#000080' },
  { name:'midnightblue', hex:'#191970' },
  { name:'mediumslateblue', hex:'#7B68EE' },
  { name:'slateblue', hex:'#6A5ACD' },
  { name:'darkslateblue', hex:'#483D8B' },
  { name:'lavender', hex:'#E6E6FA' },
  { name:'thistle', hex:'#D8BFD8' },
  { name:'plum', hex:'#DDA0DD' },
  { name:'violet', hex:'#EE82EE' },
  { name:'orchid', hex:'#DA70D6' },
  { name:'fuchsia', hex:'#FF00FF' },
  { name:'magenta', hex:'#FF00FF' },
  { name:'mediumorchid', hex:'#BA55D3' },
  { name:'mediumpurple', hex:'#9370DB' },
  { name:'blueviolet', hex:'#8A2BE2' },
  { name:'darkviolet', hex:'#9400D3' },
  { name:'darkorchid', hex:'#9932CC' },
  { name:'darkmagenta', hex:'#8B008B' },
  { name:'purple', hex:'#800080' },
  { name:'indigo', hex:'#4B0082' },
  { name:'pink', hex:'#FFC0CB' },
  { name:'lightpink', hex:'#FFB6C1' },
  { name:'hotpink', hex:'#FF69B4' },
  { name:'deeppink', hex:'#FF1493' },
  { name:'palevioletred', hex:'#DB7093' },
  { name:'mediumvioletred', hex:'#C71585' }
];

const palette = document.getElementById('palette'), nameSpan = document.getElementById('name'), hexSpan=document.getElementById('hex');

palette.onclick = e => {
  const li = e.target;
  nameSpan.innerHTML=li.dataset.name;
  hexSpan.innerHTML=li.dataset.hex;
  if (palette.active) palette.active.className = palette.active.className.replace(' active', '');
  palette.active=li;
  li.className+=' active';
};

colours.forEach(color => {
  const li = document.createElement('li');
  li.title = color.name;
  li.style.backgroundColor = color.hex;
  li.dataset.name = color.name;
  li.dataset.hex = color.hex;
  palette.appendChild(li);
});

#palette {
  width: 500px;
  list-style-type: none;
}

#palette li {
  height: 40px;
  width: 40px;
  cursor: pointer;
  float: left;
  margin: 2px;
}

#palette li.active {
  border: solid 1px;
  margin: 1px;
}

<div height="100%" width="100%">
  Name: <span id="name"></span>&emsp;Hex: <span id="hex"></span>
  <ul id="palette"></ul>
</div>

Answer 2

更新

颜色选择器现在原生为 supported in HTML5（Chrome、Firefox 和 Opera），并且可以使用输入类型 color 来实现。

Updated demo using HTML5

原创

所以，这个问题真的让我很感兴趣，主要是因为它看起来很有趣，所以我决定使用 jQuery 创建一个小的调色板类型工具。设置非常简单，目的是通过使用包含name (HTML colour names) 和hex 的颜色对象数组使其尽可能动态。除了将颜色设置为具有特定类的 div 之外，实际的点击事件本身并没有做任何聪明的事情。

jsFiddle Demo

设置如下：

HTML

​<ul></ul>
<div class="activeColour"></div>​​​​​​​

CSS

ul
{
    width: 125px;
}
li
{
    cursor: pointer;
    display: block;
    height: 25px;
    float: left;
    margin: 0;
    padding: 0;
    width: 25px;
}
.activeColour
{
    clear: both;
    height: 25px;
    width: 125px;        
}

​JavaScript - 第 1 部分，颜色数组

// define the colours
var colours = [
    { name: 'Yellow', hex: '#FFFF00' },
    { name: 'LawnGreen', hex: '#7CFC00' },
    { name: 'Aqua', hex: '#00FFFF' },
    { name: 'Fuchsia', hex: '#FF00FF' },
    { name: 'Blue', hex: '#0000FF' },
    { name: 'Red', hex: '#FF0000' },
    { name: 'DarkBlue', hex: '#00008B' },
    { name: 'DarkCyan', hex: '#008B8B' },
    { name: 'DarkGreen', hex: '#006400' },
    { name: 'DarkMagenta', hex: '#8B008B' },
    { name: 'DarkRed', hex: '#8B0000' },
    { name: 'DarkGoldenRod', hex: '#B8860B' },
    { name: 'DarkGray', hex: '#A9A9A9' },
    { name: 'LightGray', hex: '#D3D3D3' },
    { name: 'Black', hex: '#000000' }
];

JavaScript - 第 2 部分，点击！

$(function()
{
    $('li').live('click', function()
    {
         $('.activeColour').css('background-color', $(this).css('background-color'));       
    });

    var $palette = $('ul');
    for (var i = 0; i < colours.length; i++)
    {
        $palette.append($('<li />').css('background-color', colours[i].hex));
    }
});
​

Answer 3

从验证的角度来看，LI 中的 DIV 元素没有任何问题。

您遇到的具体问题是什么？

使用表格作为布局是完全可以的，尽管它是一种较旧的方法。