JavaScript + Ajax 実践サンプル集 - Slider Simple Colorpicker (カラーピッカー)

Slider Simple Colorpicker (カラーピッカー)

説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのslider()プラグインを利用してシンプルなカラーピッカーを表示します。「赤」「緑」「青」のスライダーを移動してお好みのカラーを生成してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI Slider - simple colorpicker</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
	#red, #green, #blue {
		float: left;
		clear: left;
		width: 300px;
		margin: 15px;
	}
	#swatch {
		width: 120px;
		height: 100px;
		margin-top: 18px;
		margin-left: 350px;
		background-image: none;
	  text-align:center;
	}
	#swatch span { 	   
	   text-align:center;
	   background-color:Black;
	   color:White;
	}
	#red .ui-slider-range { background: #ef2929; }
	#red .ui-slider-handle { border-color: #ef2929; }
	#green .ui-slider-range { background: #8ae234; }
	#green .ui-slider-handle { border-color: #8ae234; }
	#blue .ui-slider-range { background: #729fcf; }
	#blue .ui-slider-handle { border-color: #729fcf; }
	#demo-frame > div.demo { padding: 10px !important; }
	</style>  
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.slider.js" type="text/javascript"></script>
	<script type="text/javascript">
	  function hexFromRGB(r, g, b) {
	    var hex = [
			  r.toString(16),
			  g.toString(16),
			  b.toString(16)
		  ];
	    $.each(hex, function(nr, val) {
	      if (val.length == 1) {
	        hex[nr] = '0' + val;
	      }
	    });
	    return hex.join('').toUpperCase();
	  }
	  
	  function refreshSwatch() {
	    var red = $("#red").slider("value");
	    var green = $("#green").slider("value");
	    var blue = $("#blue").slider("value");
			var hex = hexFromRGB(red, green, blue);
	    $("#swatch").css("background-color", "#" + hex);
	    $("#swatch > span").text("#" + hex);
	  }
	  
	  $(function() {
	    $("#red, #green, #blue").slider({
	      range: "min",
	      max: 255,
	      value: 127,
	      slide: refreshSwatch,
	      change: refreshSwatch
	    });
	    $("#red").slider("value", 255);
	    $("#green").slider("value", 140);
	    $("#blue").slider("value", 60);
	  });
	</script>  
</head>
<body class="ui-widget-content" style="border:0;">

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
    Simple Colorpicker
  </p>

</div>

</body>
</html>