jquery颜色选择器设置文字颜色选择器和背景颜色选择器下载



190 756 253



特效描述:颜色选择器 设置文字颜色 背景颜色选择器,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.cxcolor.css">

2. 引入JS

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.cxcolor.min.js"></script>

3. HTML代码

<div class="wrap">
	<h1>jQuery cxColor 颜色选择器</h1>
	<h2>示例</h2>
	<form action="getcolor.php" method="post">
		<fieldset>
			<legend>默认</legend>
			<label for="color_a">选择颜色:</label><input id="color_a" name="mycolor" type="text" class="input_cxcolor" readonly> <button type="submit">提 交</button>
		</fieldset>
	</form>
	<fieldset>
		<legend>在参数中设置默认值</legend>
		<label for="color_b">选择颜色:</label><input id="color_b" type="text" class="input_cxcolor" readonly>
	</fieldset>
	<fieldset>
		<legend>在 value 中有默认值</legend>
		<label for="color_c">选择颜色:</label><input id="color_c" type="text" class="input_cxcolor" readonly value="#ff0000">
	</fieldset>
	<fieldset>
		<legend>API 示例</legend>
		<p>标题:<input id="title" type="text" value="文章标题"></p>
		<p><label for="color_d">颜色:</label><input id="color_d" type="text" class="input_cxcolor" readonly value="#009900"></p>
		<p id="acts">
			<button type="button" value="show">显示面板</button>
			<button type="button" value="color" data-color="#ff0000">设置为红色</button>
			<button type="button" value="color" data-color="#0000ff">设置为蓝色</button>
			<button type="button" value="reset">默认颜色</button>
			<button type="button" value="clear">清除颜色</button>
		</p>
	</fieldset>
	<h2>文档</h2>
	<ul>
		<li><a target="_blank" href="https://github.com/ciaoca/cxColor">Github</a></li>
		<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxcolor/">中文文档</a></li>
	</ul>
	<h2>作者</h2>
	<p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p>
	<p>Released under the MIT license</p>
</div>
<script>
$("#color_a").cxColor();
$("#color_b").cxColor({
	color:"#0066ff"
});
$("#color_c").cxColor();
(function(){
	var color=$("#color_d");
	var title=$("#title");
	var acts=$("#acts");
	var mycolor;
	color.bind("change",function(){
		title.css("color",this.value)
	});
	mycolor=$("#color_d").cxColor();
	acts.delegate("button","click",function(){
		var _val=this.value;
		var _this=$(this);
		switch (_val){
			case "show":
				mycolor.show();
				break;
			case "hide":
				mycolor.hide();
				break;
			case "color":
				mycolor.color(_this.data("color"));
				break;
			case "reset":
				mycolor.reset();
				break;
			case "clear":
				mycolor.clear();
				break;
		};
	});
	$("#btn_red").bind("click",function(){
		mycolor.color("#ff0000");
	});
	$("#btn_show").bind("click",function(){
		mycolor.show();
	});
})();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到