ColorPicker颜色选择器

iceColor是一款js颜色选择器,由ICEUI出品,拥有精美的界面,支持HEX、RGB、RGBA等颜色模式,支持手机端,使用方便,小巧玲珑,整个插件只有一个js,方便集成到任何web端,高效的可视化颜色编辑插件。

作者:我已经习惯了chrome浏览器开发者工具自带的颜色选择器,用着很顺心,比较人性化,更重要的是HEX和RGB可以自由切换。

而现在网上的一些js颜色选择器用着都不顺手,所以打算自己开发,并放置在ICEUI框架中,当然你也可以单独使用,无任何依赖,纯原生开发。

经过一些时日最终完成了这个作品,界面与chrome的开发者工具自带的颜色选择器相仿,并且更加智能化,RGB可自动转为RGBA,同时HEX又可以转为RGB,三个关系可以相互转换。至此,已将颜色选择器控件补齐,这会有助于HTML5可视化编辑的开发,不仅如此,网站风格主题颜色的定制都可以方便的使用,现已经支持HEX、RGB、RGBA颜色模式。

已支持手机端了,颜色块滑动很丝滑哦!
应用示例

使用方便,无需指定id或对象,遵循ICEUI理念,简化脚本上的逻辑,只需要添加一条classiceColor即可,可放在divinput中,根据环境自动格式化。预置颜色请用data-color,颜色值任意!

简单div形式

使用方式:div标签上添加一条classiceColor-simple即可

说明:该方式不影响原有的div排版样式,点击触发,选择颜色后自动改变div的背景色。

简单input形式

使用方式:input标签上添加一条classiceColor-simple即可

说明:该方式不影响原有的input样式,点击触发,选择颜色后自动改变input中的颜色值。

标准版形式

使用方式:div、input或任何标签上添加一条classiceColor即可

说明:该方式会直接将原有的元素删除,并在该位置创建一个新的颜色选择样式,可在该标签上添加data-name属性值,因为该方式会创建一个带有name属性的input空间,方便提交表单。

使用方法