Question

我一直试图恭维minicolors。一切都很好，我已经按照我想要的方式定位但是有一些问题为我带来了jquery我在控制台上得到了这个错误Uncaught TypeError：Object [object Object]没有方法'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);

  });

});

这次没有错误，但是我做错了什么不起作用？

再次感谢您的帮助！

Answer 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上向家中提交任何错误报告，功能请求等。

Answer 2

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

Answer 3

我之前从未使用过minicolors，但看起来你正试图将它用作基于元素的插件（这是大多数插件作者编写插件的方式），但minicolors似乎是基于原型的。

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

使用minicolors jquery

3 个答案: