jquery - 使用 minicolors jquery

Question

我一直在尝试实现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);

  });

});

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

再次感谢您的帮助!

Answer 1

更新:

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

<小时/>

来自 ABS(插件作者)的 Cory。 Jason 和 icktoday 都是正确的。 MiniColors 2.0 几天前刚刚推出测试版，API 确实发生了变化。 99.9% 的开发人员只需要包含 MiniColors JavaScript 文件并创建如下输入控件:

<input type="minicolors" />

该插件将在首次加载时自动启用页面上的所有控件。对于那些需要动态添加控件的人，只需插入 <input>元素，然后调用 init方法:

$.minicolors.init();

无需指定选择器。该插件旨在以最小的开销使您尽可能轻松地使用。欲了解更多详情，请参阅 Utility Functions在文档中。

对于您的新错误，您需要:

1. 将更改事件绑定(bind)到原始输入元素
2. 更改background-color至backgroundColor
3. 使用输入元素的 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 .