admin管理员组

文章数量:1431426

I am trying to build a color table just like MS Office font color grid. What is the best way to do it? Table, div or ul?

I have currently used a div but I am struggling to place it with in a ul which is my menu.

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

    });

});

This code works, I just want an opinion, whats the best way to skin this cat? :-)

P.S. btn is in a li

Thanks,

drjay

I am trying to build a color table just like MS Office font color grid. What is the best way to do it? Table, div or ul?

I have currently used a div but I am struggling to place it with in a ul which is my menu.

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

    });

});

This code works, I just want an opinion, whats the best way to skin this cat? :-)

P.S. btn is in a li

Thanks,

drjay

  • javascript
  • jquery
  • html
  • css
  • color-picker
Share Improve this question edited Jun 27, 2012 at 15:31 drjay asked Jun 27, 2012 at 15:19 drjaydrjay 752 silver badges11 bronze badges 4
  • 1 And...what does the Microsoft Office font-color grid look like? – David Thomas Commented Jun 27, 2012 at 15:20
  • Don't ask him that... he's gonna print all the code! :P – Danny Commented Jun 27, 2012 at 15:21
  • For your markup you can use a table as you are indeed showing tabular data (a table of colours). So I think in this context table is the option. – Dev Commented Jun 27, 2012 at 15:28
  • @David Thomas Check the main post. :-) – drjay Commented Jun 27, 2012 at 15:35
Add a ment  | 

3 Answers 3

Reset to default 5

Update

Color pickers are now natively supported in HTML5 (Chrome, Firefox and Opera), and can be achieved using the input type color.

Updated demo using HTML5

Original

So, this question really intrigued me, mainly because it looked fun, so I decided to create a little colour palette type tool using jQuery. The setup is pretty straight forward, and the aim is to make it as dynamic as possible by using an array of colour objects that contain both the name (HTML colour names), and the hex. The actual click event itself doesn't do anything clever apart from set the colour an a div which has a specific class.

jsFiddle Demo

Here is the setup:

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 - Part 1, the colours array

// 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 - Part 2, clicky!

$(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));
    }
});
​

From a validation point of view having there is nothing wrong with a DIV element inside an LI.

What exactly is the problem your experiencing?

Using table as a layout for the purpose is perfectly fine, although an older method it will serve the purpose.

I played a bit with Richard's solution .. ES6, tooltips & no 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>

本文标签： javascriptHTMLCSSJSjQuery Color quottablequotquotgridquotStack Overflow

版权声明：本文标题：javascript - HTMLCSSJSjQuery: Color &quot;table&quot;&quot;grid&quot; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745565414a2663728.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。