使用 minicolors jquery答案

【问题标题】：using minicolors jquery使用 minicolors jquery
【发布时间】：2012-12-09 15:00:09
【问题描述】：

我一直试图暗示minicolors。一切都很好，我已经按照我想要的方式定位它但是有一些问题为我隐含 jquery 我在控制台上收到这个错误 Uncaught TypeError: Object [object Object] has no method 'miniColors' 我已经包含了所有需要的 jquery 文件.

<script src="javascripts/jquery.minicolors.js"></script>
<link rel="stylesheet" href="stylesheets/jquery.minicolors.css" />

<input class="mini" type="minicolors" data-swatch-position="left" value="#75bd25"  

data-textfield="false" name="color" />


<script type="text/javascript">
$(document).ready( function() {

$('INPUT[type=minicolors]').miniColors({
change: function(hex, rgb) {     $('body').css("background-color",hex); }   
});

});

</script>

非常感谢您的帮助！！

这是修改后的代码，感谢您的帮助

$(document).ready( function() {

  $('INPUT[type=minicolors]').on('change', function() {

    var input = $(this),
      hex = input.val();

      $('body').css("background-color",hex);

  });

});

这次没有错误，但它不工作我做错了什么？

再次感谢您的帮助！

【问题讨论】：

标签： jquery jquery-ui jquery-plugins jquery-selectors

【解决方案1】：

更新：

根据用户反馈，MiniColors 2.0 的 API 已恢复为与 1.0 类似的方法。请参阅 GitHub 上的更新文档。

Cory 来自 ABS（插件作者）。 Jason 和 icktooday 都是正确的。 MiniColors 2.0 就在几天前推出了测试版，API 确实发生了变化。 99.9% 的开发人员只需要包含 MiniColors JavaScript 文件并创建一个如下所示的输入控件：

<input type="minicolors" />

插件将在首次加载时自动启用页面上的所有控件。需要动态添加控件的，只需插入<input>元素，然后调用init方法即可：

$.minicolors.init();

无需指定选择器。该插件可以让您以最小的开销尽可能简单。更多详情请参考文档中的Utility Functions。

至于你的新错误，你需要：

将更改事件绑定到原始输入元素
将background-color 更改为backgroundColor
使用输入元素的value（如果您已启用不透明度，则使用data-opacity 属性）

$('INPUT[type=minicolors]').on('change', function() {

    // This shows how to obtain the hex color and opacity (when in use)
    var hex = $(this).val(),
        opacity = $(this).attr('data-opacity');

    $('BODY').css('backgroundColor', hex);

});

注意：虽然先前版本的 MiniColors 是基于元素的，但我觉得在 2.0 中使用具有前瞻性的方法更合适。 99.9% 的用户只需要包含 MiniColors JavaScript 文件并添加 minicolors 类型的输入元素。对于那些需要额外功能的人来说，这只是一个额外的函数调用来更新内容。

请帮助测试 MiniColors 2.0 并将任何错误报告、功能请求等提交到其主页GitHub。

【讨论】：

【解决方案2】：

您使用的是 MiniColors 版本 2，但使用的代码仅适用于 MiniColors 版本 1。请使用旧版本 1 或 read the new documentation 并更新您的代码。

【讨论】：

您的链接已失效

【解决方案3】：

我以前从未使用过 minicolors，但您似乎正在尝试将它用作基于元素的插件（这是大多数插件作者编写插件的方式），但 minicolors 似乎是基于原型的。

换句话说，您不能使用$(selector).miniColors(...);，而必须使用$.minicolors.init() 以及它们支持的其他功能。

【讨论】：