使用minicolors jquery

Question

我一直试图诋毁微型人.一切都很好,我已经按照我想要的方式定位但是有一些问题为我带来了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上的更新文档.

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

<input type="minicolors" />

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

$.minicolors.init();

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

至于你的新错误,你需要:

1. 将change事件绑定到原始输入元素
2. 更改background-color到backgroundColor
3. 使用input元素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上的主页.