使用 minicolors jquery

2024-01-30

我一直在尝试实施迷你颜色 http://www.abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/。一切都很好,我已经按照我想要的方式定位了它,但是在实现 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);

  });

});

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

再次感谢您的帮助!


UPDATE:

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


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

<input type="minicolors" />

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

$.minicolors.init();

无需指定选择器。该插件旨在以最小的开销使您尽可能轻松地使用。有关更多详细信息,请参阅实用功能 http://labs.abeautifulsite.net/jquery-miniColors/#utility-functions在文档中。

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

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

});

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

请帮助测试 MiniColors 2.0 并将任何错误报告、功能请求等提交到其主页GitHub https://github.com/claviska/jquery-miniColors/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 minicolors jquery 的相关文章

随机推荐

  • Angular 9 - 伊斯坦布尔测试覆盖率报告生成为空

    我收到一份空报告 它列出了文件 但没有填充百分比 知道是什么原因造成的吗 错误信息 Handlebars 访问已被拒绝解析属性 语句 因为它不是其父级的 自己的属性 我的 package json 文件 dependencies angul
  • PL/SQL 存储过程输出游标到 VBA ADODB.RecordSet?

    在这篇文章的序言中 我想说我对 Excel 2007 vba 宏相当陌生 我正在尝试调用一个以游标作为输出参数的 Oracle PL SQL 存储过程 程序规范如下所示 PROCEDURE get product out cur data
  • 如何为 Azure Functions v3 配置 swagger ui 页面?

    我使用以下命令将 OpenApi 支持添加到 Azure 函数应用程序 v3 ConfigureOpenApi in Program Main 我对特定功能使用函数装饰 但如何控制 api swagger ui 上显示的通用 API 名称
  • httplib2 安装时权限被拒绝

    我正在尝试安装适用于 Python 的 httplib2 库 以便我可以使用它与 Twitter 进行交互 但当我尝试通过 python setup py install 进行安装时 我在控制台中收到以下错误 这是一个新的 MBA 我是唯一
  • 在 Node.Js Express 中,“res.render”是否结束 http 请求?

    因此 只有在确定一切都已完成时才执行 res render 对吗 因为它结束了请求并弹出了一个网页 如果您不提供回调res render view options fn 它会自动给出 200 HTTP Status 和 Content Ty
  • “快速路径”无竞争同步是什么意思?

    来自性能和可扩展性的章节JCIP书籍 http jcip net s3 website us east 1 amazonaws com 同步机制针对无竞争的情况进行了优化 case 易失性始终是无争议的 在撰写本文时 快速路径 无竞争同步范
  • 撤消 git 过滤分支

    我不小心使用 git filter branch 从我的存储库中删除了一个文件 git filter branch f index filter git rm cached ignore unmatch images thumb a JPG
  • 在编译时生成唯一的数字

    我想为标题中的每个类生成唯一的数字 在我的例子中为素数 但我们可以说这应该只是连续的数字 即 1 2 3 4 等 当然我可以对这些进行硬编码 struct A enum ID 1 struct B enum ID 2 struct C en
  • 使用 React Navigation,如何强制抽屉导航器弹出到堆栈顶部?

    我正在使用 React Navigation 并有一个抽屉式导航器 其中包含多个 Stack Navigator 作为其项目 当我打开抽屉导航器并单击某个项目时 它会显示我单击的堆栈中的第一个屏幕 当我转到堆栈中的第二个屏幕 然后打开抽屉并
  • JS:查找对象数组中的最大数字

    找到对象数组中最大数字并返回该对象的最简单方法是什么 var arr num 0 5 num 1 num 0 35 尝试使用 forEach 但除了存储每个数字并比较它们之外无法找到一种方法来做到这一点 任何帮助表示赞赏 提前致谢 redu
  • 尝试了解 Latex、Sweave 和 R 之间的工作流程

    假设我编写了以下小 Rnw 文件 documentclass article usepackage utf8 inputenc usepackage Sweave usepackage tikz usepackage pgf begin d
  • SVG 过滤器无法正常工作直线[重复]

    这个问题在这里已经有答案了
  • Visual Studio 不显示打字稿错误

    我遇到了奇怪的问题 我已经安装了 VS2013 和 typescript 当我点击保存按钮时 ts文件 调用 ts 编译器 但 VS 没有显示任何 ts 错误 如果编译器失败我只会收到一条消息 Input file contained se
  • IronRouter 上的上一页位置

    在 IronRouter 中 有没有办法在转到下一页之前获取上一页位置 我可以使用一个事件来获取此信息吗 提前致谢 由于 Iron Router 使用常用的 History API 因此您可以使用普通的 JS 方法 history go 1
  • 动态类型测试未按预期工作

    这是一个SSCCE http sscce org 我有一个地图容器类 其中内部Map是根据需要创建的set被调用的方法 flow use strict class MapContainer map Map
  • Python 跨不同类的 asyncio.Event()

    我正在编写一个 Python 程序来与基于 CAN 总线的设备进行交互 我正在成功使用 python can 模块来实现此目的 我还使用 asyncio 来响应异步事件 我编写了一个由 CanBusSequencer 类使用的 CanBus
  • .NET Compact Framework 能否获得单元格中包含多行文本的网格?

    是否可以使用 NET Compact 框架在网格单元中显示多行文本 我们需要创建一个网格 其中中间列包含一个地址 我们希望通过多行来显示这一点 并 可能 对最后一行应用一些格式 e g 123 任意街伯明翰 B1 2DU tel 0123
  • PhantomJS 不支持 Javascript 国际化 API

    我有一系列Jasmine针对运行的测试AngularJs使用 ECMAScript 国际化 API 的服务 当我通过 Chrome 运行它们时 它们都运行成功 但是 当我使用PhantomJS通过 Maven 运行它们 它们看起来都失败了P
  • T4 报告编译转换:类、结构中的标记“this”无效

    尝试运行 T4 模板不可变对象图 https github com AArnott ImmutableObjectGraph给出的错误为 Error 5 Compiling transformation Invalid token this
  • 使用 minicolors jquery

    我一直在尝试实施迷你颜色 http www abeautifulsite net blog 2011 02 jquery minicolors a color selector for input controls 一切都很好 我已经按照我