SOURCE CODE: The Built-in Slider Skin
<!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>The Built-in Slider Skin | JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="Uize.Widget.Bar.Slider Uize.Widget.Bar.Slider.xSkin"/>
<meta name="description" content="A basic preset skin is provided for the slider widget that is customizable with various parameters. This demo shows a few variations using this skin."/>
<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"/>
<style type="text/css">
.sliderShell {
width:60px;
height:350px;
}
.sliderSpacer {
width:15px;
}
</style>
</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>
The Built-in Slider Skin
<div id="page-actions" class="pageActions">
<a href="source-code/slider-built-in-skin.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- explanation copy -->
<div class="explanation">
<p>In this example, multiple instances of <a href="../reference/Uize.Widget.Bar.Slider.html"><code>Uize.Widget.Bar.Slider</code></a> are being wired up. The markup for all the sliders is not in the page, but is inserted dynamically when the slider widgets are wired up, and is based on the built-in skin supplied by the <a href="../reference/Uize.Widget.Bar.Slider.xSkin.html"><code>Uize.Widget.Bar.Slider.xSkin</code></a> extension to the <code>Uize.Widget.Bar.Slider</code> class. This skin can accept input parameters that control certain aspects of the slider's look.</p>
</div>
<!-- page layout's "wireframe" with slots for sliders' HTML -->
<table cellspacing="0" cellpadding="0" style="margin:auto;">
<tr valign="bottom">
<td><div id="page_slider0" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider1" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider2" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider3" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider4" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider5" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider6" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider7" class="sliderShell"></div></td>
<td class="sliderSpacer"></td>
<td><div id="page_slider8" class="sliderShell"></div></td>
</tr>
</table>
</div>
<!-- JavaScript code to make the static slider HTML "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.Bar.Slider',
'Uize.Widget.Bar.Slider.xSkin'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** set the default UI HTML and other properties for all slider widgets ***/
Uize.Widget.Bar.Slider.set ({
orientation:'vertical',
knobSize:35,
borderThickness:3,
minValue:0,
maxValue:100,
built:false
});
/*** add the slider child widgets ***/
page.addChild (
'slider0',
Uize.Widget.Bar.Slider,
{
borderTintColor:'#f00',
borderTintLevel:15,
knobTintColor:'#f80',
knobTintLevel:35,
emptyTintColor:'#fc4',
emptyTintLevel:25,
fullTintColor:'#fc9',
fullTintLevel:70,
value:10
}
);
page.addChild (
'slider1',
Uize.Widget.Bar.Slider,
{
borderTintColor:'#000',
borderTintLevel:20,
knobTintColor:'#666',
knobTintLevel:35,
emptyTintColor:'#444',
emptyTintLevel:60,
fullTintColor:'#fff',
fullTintLevel:50,
value:20
}
);
page.addChild (
'slider2',
Uize.Widget.Bar.Slider,
{
emptyTintColor:'#000',
emptyTintLevel:30,
fullTintColor:'#fff',
fullTintLevel:30,
value:30
}
);
page.addChild (
'slider3',
Uize.Widget.Bar.Slider,
{
borderTintColor:'#9cf',
borderTintLevel:20,
knobTintColor:'#7bb',
knobTintLevel:20,
emptyTintColor:'#233',
emptyTintLevel:60,
fullTintColor:'#6aa',
fullTintLevel:20,
value:40
}
);
page.addChild (
'slider4',
Uize.Widget.Bar.Slider,
{
borderTintColor:'#abf',
borderTintLevel:40,
knobTintColor:'#679',
knobTintLevel:50,
emptyTintColor:'#456',
emptyTintLevel:60,
fullTintColor:'#abc',
fullTintLevel:50,
value:50
}
);
page.addChild (
'slider5',
Uize.Widget.Bar.Slider,
{
borderTintColor:'#a99',
borderTintLevel:50,
knobTintColor:'#a99',
knobTintLevel:30,
emptyTintColor:'#877',
emptyTintLevel:50,
fullTintColor:'#fee',
fullTintLevel:80,
value:60
}
);
page.addChild (
'slider6',
Uize.Widget.Bar.Slider,
{
fullTintColor:'#d00',
fullTintLevel:100,
emptyTintColor:'#000',
emptyTintLevel:50,
value:70
}
);
page.addChild (
'slider7',
Uize.Widget.Bar.Slider,
{
fullTintColor:'#0d0',
fullTintLevel:100,
emptyTintColor:'#000',
emptyTintLevel:50,
value:80
}
);
page.addChild (
'slider8',
Uize.Widget.Bar.Slider,
{
fullTintColor:'#00d',
fullTintLevel:100,
emptyTintColor:'#000',
emptyTintLevel:50,
value:90
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
</body>
</html>