文章/答案/技术大牛

发布

社区首页 >问答首页 >在桌子上显示彩色色

问在桌子上显示彩色色
EN

Stack Overflow用户

提问于 2016-07-12 18:44:09

回答 2查看 575关注 0票数 0

我有一个页面，允许用户使用小部件来选择颜色。另一页列出了颜色，我喜欢微彩小部件内的斯沃琪的外观。

尽管我很挣扎，但我似乎无法得到一个简单的矩形来显示数据表中颜色的样本。我在想，我可以用他们的样本，只要复制出来，但它似乎取决于形式和输入。我看到的只是一个2x2像素点，类似于这样：

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

如何在数据表中显示一个很好的矩形样本，就像显示微小颜色一样？

// 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>

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-07-12 21:43:54

我不确定我是否理解这个问题，但我根据我认为你在寻找什么，提出了一个答案。

基本上，当颜色选择器更改值(颜色)时，我们获取生成的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>

票数 1

Stack Overflow用户

发布于 2016-07-12 21:15:23

您可以使用色选器 --这是一个jquery插件。

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

附代码样本。

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

<!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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38336640

复制

相似问题

问在桌子上显示彩色色
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在桌子上显示彩色色EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在桌子上显示彩色色
EN