javascript - 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;

}

。行{

}

。細胞{

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');

    });

});

このコードは機能します。意見が欲しいのですが、この猫の皮を剥ぐのに最適な方法は何ですか? :-)

PSボタンはLiにあります

ここに画像の説明を入力

ありがとう、

ドジェイ

score 5 · Accepted Answer

アップデート

カラーピッカーはHTML5 (Chrome、Firefox、Opera) でネイティブにサポートされるようになり、入力タイプを使用して実現できますcolor。

HTML5 を使用して更新されたデモ

オリジナル

この質問は面白そうなので、とても興味をそそられたので、jQuery を使って小さなカラーパレットタイプのツールを作成することにしました。セットアップは非常に簡単で、目的は、name( HTML color names ) とhex. div実際のクリックイベント自体は、特定のクラスを持つ色を設定すること以外に、巧妙なことは何もしません。

jsFiddle デモ

セットアップは次のとおりです。

HTML

&lt;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));
    }
});

score 0 · Accepted Answer

私はリチャードのソリューションで少し遊んだ.. 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>

score 0 · Accepted Answer

検証の観点からは、LI 内の DIV 要素に問題はありません。

あなたが経験している問題は正確には何ですか？

目的のためにテーブルをレイアウトとして使用することはまったく問題ありませんが、古い方法では目的を果たします。

javascript - HTML/CSS/JS/jQuery: カラー「テーブル」/「グリッド」

HTML

CSS

JS/jQuery

3 に答える 3

アップデート

オリジナル

HTML

CSS

JavaScript - パート 1、色の配列

JavaScript - パート 2、クリック！

Related

Reference