Javascript颜色选择器与8位十六进制

Javascript color picker with 8 digit hex

本文关键字：8位 十六进制 选择器 颜色 Javascript      更新时间：2023-09-26

我正在寻找一个javascript颜色选择器，我可以设置颜色和不透明度。返回的字符串必须是8位长十六进制值(不包括#)。

已经看过了

  • Farbtastic http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
  • jPicker http://www.digitalmagicpro.com/jPicker/
  • jQuery Minicolors http://labs.abeautifulsite.net/jquery-miniColors/

等。但是它们都没有给我我想要的，我不想弄乱修剪字符串等，因为颜色选择器必须在一个页面上实现大约100次才能实现皮肤编辑器。

编辑

http://jscolor.com/

这是使用JSColor:

的样子http://img707.imageshack.us/img707/3962/unbenannt3op.png

这是我在bean中获取和设置十六进制代码的代码:

<h:inputText styleClass="color {hash:true}"
             value="#{skinningBean.currentSkin.titleBar.backgroundColorStart}">
<a4j:ajax event="change" render="preview" />

这将工作得非常好，除了缺少alpha值(最后两个数字)。

我不知道为什么它不容易找到，但是光谱有我在颜色选择器中需要的一切。(在我发现光谱之前，我一直在使用微彩。)

我不知道它是否需要8位十六进制，但我知道它会接受4个参数rgba。(它使用一个名为tinycolor的插件进行所有的颜色解析。)

我用JavaScript写了一个公共领域的颜色选择器。按照您的要求，我现在已经添加了一个功能，该功能以RRGGBBAA格式显示颜色，并带有十六进制组件。

  • 演示:http://peteroupc.github.com/colorpicker/(查看示例"Alpha颜色选择器(RRGGBBAA格式)"。)
  • 源代码:https://github.com/peteroupc/colorpicker

要启用这个特性，给文本框一个以"rgbahex_"开头的ID，如下例所示:

<input type="text" value="ff0000ff" name="c2" id="rgbahex_c2">

通过这样做，文本框将转换为颜色选择器。但是，只有当输入框在页面完全加载之前出现在HTML中时，它才会起作用。如果你在运行时创建颜色选择器，使用下面的JavaScript来设置它:

textbox.value="ff0000ff";
PDColorPicker.setColorPicker(textbox,{rgbahex:true});

setColorPicker也将文本框转换为颜色选择器。

我已经更新了颜色选择器以添加颜色格式AARRGGBB。在上面的例子中使用argbhex代替rgbahex。

您还可以使用"rgbahex_"，"arghex_"等来开始文本框的类名，而不是ID，将文本框转换为颜色选择器。我认为这对应于XML中的styleClass属性。

您可以通过定义一个"修剪字符串并做这件事"函数来管理它，该函数只需要实现一次，并且只需在任何地方调用它。

我建议使用Scott建议的光谱颜色选择器，但随后您可以从中获得RGB值，并使用此属性:

background: rgba(132,182,19,.5);

这样，它将设置当前div的背景，它将像你想要的那样不透明(所以你必须找到一种方法来给它你想要的不透明度)，但至少你会从选择器中获得颜色值。如果你想了解更多关于使用rgba的回退和变通方法的信息，请参阅CSS技巧。

更新:

如果你必须使用十六进制值，试试这样做:

http://jsfiddle.net/WzGG6/1/

相关文章：