二维码
搬瓦工 locvps

需要完成一个软件功能的前端,其中一项是实现表单的颜色取色功能,如果是直接输入颜色肯定大部分用户是不会的,为了体验较好肯定是直接有取色模块选择。默认的input 是带有color Type属性的,但是这样的属性体验也不够好。

这里搜索到来自"https://github.com/mumuy/widget"可以实现不错的前端功能,这里有jquery-colorpicker扩展支持颜色选择器设置。于是根据文档可以实现这样的效果。

jquery.colorpicker组件快速实现文本框取色功能

这个效果是不是不错?那如何实现的呢?

1、JS引用

<script type="text/javascript" src="https://jquerywidget.com/public/script/jquery.min.js"></script>
<script type="text/javascript" src="https://jquerywidget.com/code/jquery.colorpicker.js"></script>

这里我是调用官方的,我们自己可以放置本地,官方的速度很慢。

2、应用脚本

<script type="text/javascript">
$('input[type="color"]').colorpicker({hoverChange:true});
</script>
<input type="text" value="#00f000" size="15"/>
<span id="test"></span>

<script type="text/javascript">
$('input[type="text"]').colorpicker({
'onSelect':functiON(color){
$('#test').text('颜色修改为:'+color);
}
});
</script>

对应的样式我们自己修改。


locvps
评论专区
  • 昵 称必填
  • 邮 箱必填
  • 网 址选填
◎已有 0 人评论
BudgetVM
作者介绍
转载大师

转载大师

转载大师作为本站编辑,主要负责把优秀的文章转载至此。如果您认为本文侵犯了您的版权信息,请与转载大师联系修正。
80vps henghost
30天热门
budgetvm sugarhosts
二维码

分享:

支付宝

微信