颜色选项卡

最新推荐文章于 2022-09-26 18:40:23 发布

奋斗的蜗牛，奔跑吧

最新推荐文章于 2022-09-26 18:40:23 发布

阅读量487

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42666837/article/details/86666639

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

	
	<!-- jQuery -->
	<script src="jquery.min.js"></script>
	
	<!-- Bootstrap 3 -->
	<link rel="stylesheet"                 
     href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	
	<!-- MiniColors -->
	<script src="jquery.minicolors.js"></script>
	<link rel="stylesheet" href="jquery.minicolors.css">

<body>

	<tr>
		<td ><input type="text" class="value form-control" value="xxxx" /></td>
		<td >
			<input name="form-control" class="form-control" data-control="hue" value="xxx" >
			<input name="form-control" class="form-control" data-control="hue" value="xxx"disabled>
			<div style="background-color: xxx" class="colorSelector" />
		</td>
		<td><input type="text" class="form-control" value=""></td>
	</tr>
</body>

$(this).ColorPicker({
				color:colo11, 
				onShow: function (colpkr) {
					$(colpkr).fadeIn(200);
					return false;
				},
				onHide: function (colpkr) {
					$(colpkr).fadeOut(200);
					return false;
				},
				onChange: function (hsb, hex, rgb) {
					var str = rgb.r+','+rgb.g+','+rgb.b;
					$('.form-control.click').next().val('#'+hex);
					$('.form-control.click').val(str);
					$('.form-control.click').next().trigger("change");
					$('.form-control.click ~ .colorSelector').css('backgroundColor', '#' + hex);
				}
			});

$(this).minicolors({
					control: $(this).attr('data-control') || 'hue',
					defaultValue: $(this).attr('data-defaultValue') || '',
					inline: $(this).attr('data-inline') === 'true',
					letterCase: $(this).attr('data-letterCase') || 'lowercase',
					opacity: $(this).attr('data-opacity'),
					position: $(this).attr('data-position') || 'bottom left',
					change: function(hex, opacity) {
						if( !hex ) return;
						if( opacity ) hex += ', ' + opacity;
						try {
							console.log(hex);
						} catch(e) {}
					},
					theme: 'bootstrap'
				});

jquery插件地址：http://www.htmleaf.com/jQuery/

奋斗的蜗牛，奔跑吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
颜色选项卡

&lt;!-- jQuery --&gt; &lt;script src="jquery.min.js"&gt;&lt;/script&gt; &lt;!-- Bootstrap 3 --&gt; &lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap
复制链接

扫一扫

专栏目录