Question

我有一个页面，允许用户使用jquery minicolor小部件来选择颜色。另一个页面列出了颜色，我喜欢minicolor widget中的样本外观。

尽我所能，我似乎无法得到一个简单的矩形来显示数据表中的颜色样本。我以为我可以通过复制它来使用他们的样本，但它似乎取决于形式和输入。我所看到的是一个类似于此的2x2像素点：

http://fiddle.jshell.net/Kieveli/5t2u0euy/2/

如何在数据表中显示一个漂亮的矩形样本，类似于minicolour的显示方式？

// Hide all stuffs
$('.rw_widget_colour').addClass('rw_hidden');

// Init minicolors
$('.text').minicolors();

// Set color
$('.colorpicker').minicolors('value', '#2ed1c1');

// Show
$('.rw_widget_colour').removeClass('rw_hidden');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.css">
<script src="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.js"></script>    


<form class="aui">
  <label class="rw_widget_colour">
    <div class="rw_widget_swatch">jaoja</div>
    <input class="text colorpicker" type="text" name="rw_widget_colour" value="#ff0"/>
  </label>
</form>

<!-- Show a swatch: -->

<table>
  <tr><td>
    <span class="minicolors-swatch minicolors-sprite minicolors-input-swatch">
      <span style="background-color: rgb(46, 209, 193);" class="minicolors-swatch-color"></span>
    </span>
  </td></tr>
</table>

Answer 1

我不确定我是否明白这个问题，但我根据自己的想法提出了答案。

基本上，当颜色选择器更改值（颜色）时，我们会抓取生成的span新选择的背景颜色，并将其设置为表格单元格td的属性。

您可以轻松修改它以根据您的需要进行修改，或者在您的问题中添加更多详细信息，以澄清我误解的内容。

更新

根据评论，我还会在颜色样本旁边显示颜色代码（现在包含在div中 - 根据您的喜好调整大小）

$(function() {
  // Hide all stuffs
  $('.rw_widget_colour').addClass('rw_hidden');

  // Init minicolors
  $('.text').minicolors();

  // Set color
  $('.colorpicker').minicolors('value', '#2ed1c1');

  // Show
  $('.rw_widget_colour').removeClass('rw_hidden');

  // update table colour upon changes in the colour picker
  $(".colorpicker").on('change', function() {
    var newCol = $(this).parent().find('.minicolors-swatch-color').attr('style');
    var newColText = $('input.text.minicolors-input').val();
    $('.colourChosen').attr('style', newCol);
    $('.colourChosenText').text(newColText);
  });
});

.rw_hidden {
  display: none;
}
td div {
  min-width: 25px;
  width: 25px;
  min-height: 25px;
  height: 25px;
  display: inline-block;
}
td {
  width: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.6/jquery.minicolors.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.6/jquery.minicolors.min.js"></script>

<!--
<link rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.css"> 
<script src="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.js"></script>
-->
<form class="aui">
  <label class="rw_widget_colour">
    <div class="rw_widget_swatch">jaoja</div>
    <input class="text colorpicker" type="text" name="rw_widget_colour" value="#ff0" />
  </label>
</form>

Show a swatch:

<table>
  <tr>
    <td>
      new colour:
    </td>
    <td>
      <div class="colourChosen">&nbsp;</div>
      <div class="colourChosenText"></div>
    </td>
  </tr>
</table>

Answer 2

您可以使用colorpicker - 它是一个jquery插件。

输出看起来像这样，但默认颜色是可自定义的。单击该框，用户可以更改颜色。

附加代码示例。

＆＃13;

$('#colorSelector').ColorPicker({
	color: '#0000ff',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
	}
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.rachelgallen.com/css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="http://www.rachelgallen.com/css/layout.css" />
    <title>ColorPicker - jQuery plugin</title>
	<script type="text/javascript" src="http://www.rachelgallen.com/js/jquery.js"></script>
	<script type="text/javascript" src="http://www.rachelgallen.com/js/colorpicker.js"></script>
    <script type="text/javascript" src="http://www.rachelgallen.com/js/eye.js"></script>
    <script type="text/javascript" src="http://www.rachelgallen.com/js/utils.js"></script>
    <script type="text/javascript" src="http://www.rachelgallen.com/js/layout.js"></script>
</head>

<body>
<div id="colorSelector">
  <div style="background-color:#ff00ff"></div>

  </div>
</body>

</html>

＆＃13;

在表中显示颜色样本

2 个答案: