颜色选择器插件

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2012-03-02   阅读次数: 357   查看权限: 游客查看

一款不错的网页颜色选择器,故整理与大家分享

jscolor-1.3.13 官方:http://jscolor.com

1、基本应用

点击选择颜色: 只要设置了class="color" 系统会自动绑定颜色选择器,如果需要修改class请在jscolor基本设置里修改bindClass

<script type="text/javascript" src="jscolor/jscolor.js"></script>
点击选择颜色:<input class="color" value="66ff00">
2、其他配置

可以为空: 接受任意颜色: 带#符号: 带#符号并小写: 隐藏滑杆: 增加关闭按钮 觉得没必要

<script type="text/javascript" src="jscolor/jscolor.js"></script>
可以为空:<input class="color {required:false}">
接受任意颜色:<input class="color {adjust:false}">
带#符号:<input class="color {hash:true}">
带#符号并小写:<input class="color {hash:true,caps:false}">
隐藏滑杆:<input class="color {slider:false}">
增加关闭按钮<input class="color {pickerClosable:true}">
3、HSV/HVS模式选择

HSV 模式: HVS 模式: 有没有发现两者的区别?看背景图片

<script type="text/javascript" src="jscolor/jscolor.js"></script>
HSV 模式:<input class="color {pickerMode:'HSV'}">
HVS 模式:<input class="color {pickerMode:'HVS'}">
4、弹出位置选择

右边: 上边: 左边:当然系统会自动判断有没有空间弹出哦,没有空间的话会自动选择弹出位置

<script type="text/javascript" src="jscolor/jscolor.js"></script>
右边:<input class="color {pickerPosition:'right'}">
上边:<input class="color {pickerPosition:'top'}">
左边:<input class="color {pickerPosition:'left'}"> 
5、边框面板设置

加粗边框: 加粗面板: 外边框: 里边框: 面板色: 透明面板:

<script type="text/javascript" src="jscolor/jscolor.js"></script>
加粗边框:<input class="color {pickerBorder:3,pickerInset:10}">
加粗面板:<input class="color {pickerFace:20}">
外边框:<input class="color {pickerBorderColor:'red green blue yellow'}">
里边框:<input class="color {pickerInsetColor:'#9F9 #090 #090 #9F9'}">
面板色:<input class="color {pickerFaceColor:'#01BABE'}">
透明面板:<input class="color {pickerFaceColor:'transparent'
,pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}">
6、显示与隐藏面板

用js来控制隐藏与显示

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input class="color {pickerOnfocus:false}" id="myColor">
<input type="button" value="显示" onmousemove="document.getElementById('myColor').color.showPicker()">
<input type="button" value="隐藏" onmousemove="document.getElementById('myColor').color.hidePicker()">
7、值的获取

改变背景色:

R G B - - - H S V

Choose any color:

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p id="scscms" style="background-color:">改变背景色:<input class="color"
	onchange="document.getElementById('scscms').style.backgroundColor = '#'+this.color" />
</p>
R<input id="red" size="5">  G<input id="grn" size="5">  B<input id="blu" size="5">  - - -
H<input id="hue" size="5">  S<input id="sat" size="5">  V<input id="val" size="5">
<p> Choose any color: <input class="color" id="myColor" onchange="
	document.getElementById('red').value = this.color.rgb[0]*100 + '%';
	document.getElementById('grn').value = this.color.rgb[1]*100 + '%';
	document.getElementById('blu').value = this.color.rgb[2]*100 + '%';
	document.getElementById('hue').value = this.color.hsv[0]* 60 + '°';
	document.getElementById('sat').value = this.color.hsv[1]*100 + '%';
	document.getElementById('val').value = this.color.hsv[2]*100 + '%';">
</p>
8、设定值

可以默认设定 #ff0000 ff0000 #f00 f00等值

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input class="color" id="myC" value="#f00">
<input type="submit" value="颜色1"
	onmouseover="document.getElementById('myC').color.fromString('F2C80A')">
<input type="submit" value="颜色2"
	onmouseover="document.getElementById('myC').color.fromRGB(0.8, 1, 0.2)">
<input type="submit" value="颜色3"
	onmouseover="document.getElementById('myC').color.fromHSV(4, 0.8, 0.5)">
9、关联其它节点

传递值:

传递样式:

传递值和样式: 这功能不错

<p>传递值:<input class="color {valueElement:'myValue'}"> <input id="myValue"></p>
<p>传递样式:<input class="color {styleElement:'myStyle'}"> <input id="myStyle"></p>
<p>传递值和样式:<input class="color {valueElement:'myBoth',styleElement:'myBoth'}"> <input id="myBoth"></p>
10、js绑定应用于ajax

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input id="myField1">
<script type="text/javascript">
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
myPicker.fromString('99FF33');  // 设定默认值
</script>
11、性能测试

一下生成100个选择器测试一下性能

 
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input onclick="add()" type="button" value="测试">
<div id="adddiv"></div>
<script type="text/javascript">
function add() {
	var count = 100
		for(var i=0; i<count; i++) {
		var input = document.createElement('INPUT')
		input.style.width = '5em'
		var col = new jscolor.color(input)
		col.fromHSV(6/count*i, 1, 1);
		document.getElementById('adddiv').appendChild(input);
	}
}
</script>

下载地址:http://www.scscms.com/software/2012-3/216101449.html

关键词: jquery,颜色选择,jscolor   编辑时间: 2012-03-02

  • 感到高兴

    1

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
100%(1)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介