SOURCE CODE: Sliders as RGB Selectors
<!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>Sliders as RGB Selectors | JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="color widget Uize.Color Uize.Widget.Bar.Slider"/>
<meta name="description" content="Get three sliders in the same room together and you've got yourself an RGB color selector. See how to get sliders to cooperate for the greater good."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Sliders as RGB Selectors
<div id="page-actions" class="pageActions">
<a href="source-code/sliders-as-rgb-selectors.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- explanation copy -->
<div class="explanation">
<p>In this simple example, three instances of <a href="../reference/Uize.Widget.Bar.Slider.html"><code>Uize.Widget.Bar.Slider</code></a> are wired up and used together by some simple logic to control the values of the red, green, and blue channels of an RGB color. As you drag the individual sliders, a color swatch above the sliders is updated to the current color.</p>
</div>
<!-- page layout's "wireframe" with slots for sliders' HTML -->
<table cellspacing="0" cellpadding="0" style="margin:auto;">
<tr>
<td id="page-colorSwatch" colspan="5" height="45"> </td>
</tr>
<tr>
<td colspan="5" height="6"></td>
</tr>
<tr>
<td id="page_redSlider"><img src="../images/blank.gif" width="56" height="340" alt=""/></td>
<td width="6"></td>
<td id="page_greenSlider"><img src="../images/blank.gif" width="56" height="340" alt=""/></td>
<td width="6"></td>
<td id="page_blueSlider"><img src="../images/blank.gif" width="56" height="340" alt=""/></td>
</tr>
<tr>
<td colspan="5" height="6"></td>
</tr>
<tr>
<td height="25" style="background:#f00"> </td>
<td width="6"></td>
<td height="25" style="background:#0f0"> </td>
<td width="6"></td>
<td height="25" style="background:#00f"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Color',
'Uize.Widget.Bar.Slider.xSkin'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** code for updating the color swatch ***/
function updateColorSwatch () {
page.setNodeStyle ('colorSwatch',{background:Uize.Color.to (rgbSliders,'#hex')});
}
/*** add the slider child widgets for red, green, and blue color channels ***/
function createChannelSlider (channel,color) {
page.addChild (
channel + 'Slider',
Uize.Widget.Bar.Slider,
{
fullTintColor:color,
minValue:0,
maxValue:255,
borderThickness:3,
borderTintColor:'#123',
borderTintLevel:50,
knobSize:35,
fullTintLevel:100,
built:false
}
).wire ('Changed.value',updateColorSwatch);
}
createChannelSlider ('red','#f00');
createChannelSlider ('green','#0f0');
createChannelSlider ('blue','#00f');
var rgbSliders = [page.children.redSlider,page.children.greenSlider,page.children.blueSlider];
/*** wire up the page widget ***/
page.wireUi ();
/*** initialize the color swatch ***/
updateColorSwatch ();
}
});
</script>
</body>
</html>