使用minicolors jquery [英] using minicolors jquery

问题描述

我一直试图恭维 minicolors 的。一切都很好，我已经按照我想要的方式定位但是有一些问题为我带来了jquery我在控制台上得到了这个错误Uncaught TypeError：Object [object Object]没有方法'miniColors'我已经包含了所有需要的jquery文件。

Ive been trying to impliment minicolors. Everything is fine and i have positioned it the way i want but there are some problems implimenting the jquery for me I get this error on the console Uncaught TypeError: Object [object Object] has no method 'miniColors' I have included all jquery files needed.

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

感谢您的帮助!!

这是我提交的修改后的代码感谢您的帮助

this is the reviced code I drew thanks for your help

$(document).ready( function() {

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

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

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

  });

});

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

there are no errors this time but it is not working what am i doing wrong?

再次感谢你的帮助！

推荐答案

更新：

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

Based on user feedback, the API for MiniColors 2.0 has reverted to a similar approach to 1.0. Please see the updated documentation on GitHub.

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

Cory here from ABS (plugin author). Both Jason and icktooday are correct. MiniColors 2.0 was launched into beta just a few days ago and the API has indeed changed. 99.9% of developers will just need to include the MiniColors JavaScript file and create an input control like this:

<input type="minicolors" />

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

The plugin will automatically enable all controls on the page when it first loads. For those who need to add controls dynamically, simply insert the <input> element and then call the init method:

$.minicolors.init();

无需指定选择器。该插件可以让您以最小的开销尽可能轻松地完成任务。有关详细信息，请参阅文档中的实用程序功能。

No need to specify a selector. The plugin works to make it as easy as possible for you with minimal overhead. For more details, refer to the Utility Functions in the docs.

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

As for your new error, you need to:

1. 将更改事件绑定到原始输入元素


2. 将 background-color 更改为 backgroundColor


3. 如果已启用，请使用输入元素的值（和数据不透明度属性不透明度）

1. Bind the change event to the original input element
2. Change background-color to backgroundColor
3. Use the input element's value (and data-opacity attribute if you've enabled 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 类型的输入元素。对于那些需要额外功能的人来说，这只是一个额外的函数调用来更新内容。

Note: While the previous version of MiniColors was element-based, I felt it was more appropriate to use a forward-thinking approach for 2.0. 99.9% of users will only need to include the MiniColors JavaScript file and add an input element with the minicolors type. For those who need additional functionality, it's just an extra function call to update things.

请帮助测试MiniColors 2.0并提交任何错误报告，功能请求等等。它位于 GitHub 上。

Please help test out MiniColors 2.0 and submit any bug reports, feature requests, etc. to its home on GitHub.

这篇关于使用minicolors jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！