basic.html revision 1fd79b116af4fdf76948c0e0ed8bb3ae47955e70
<!doctype html>
<html>
<head>
<title>Test Page</title>
.markup {
margin: 10px 0 0 300px;
}
</style>
</head>
<body class="yui-skin-sam">
<div class="markup">
<!--div id="slider_v_js"></div-->
<div id="slider_h_js"></div>
<!--div id="slider_v_railonly">
<div class="yui-slider-rail"></div>
</div>
<div id="slider_h_railonly">
<div class="yui-slider-rail"></div>
</div>
<div id="slider_v_thumbonly">
<div class="yui-slider-thumb"></div>
</div>
<div id="slider_h_thumbonly">
<div class="yui-slider-thumb"></div>
</div>
<div id="slider_v_thumbimgonly">
</div>
<div id="slider_h_thumbimgonly">
</div>
<div id="slider_v_thumbasimgonly">
</div>
<div id="slider_h_thumbasimgonly">
</div>
<div id="slider_v_railandthumb">
<div class="yui-slider-rail">
<div class="yui-slider-thumb"></div>
</div>
</div>
<div id="slider_h_railandthumb">
<div class="yui-slider-rail">
<div class="yui-slider-thumb"></div>
</div>
</div>
<div id="slider_v_imgthumb">
<div class="yui-slider-rail">
</div>
</div>
<div id="slider_h_imgthumb">
<div class="yui-slider-rail">
</div>
</div>
<div id="slider_v_full">
<div class="yui-slider-rail">
<div class="yui-slider-thumb">
</div>
</div>
</div>
<div id="slider_h_full">
<div class="yui-slider-rail">
<div class="yui-slider-thumb">
</div>
</div>
</div-->
<p>
<input type="button" id="size" value="Change size">
<input type="button" id="val" value="Set Value">
<input type="button" id="disable" value="Disable">
</p>
<div id="report">0</div>
</div>
<script type="text/javascript">
YUI({
base:'/build/',
filter: 'raw'/*,
logInclude:{
slider:true,
dd:true
}
*/
}).use('slider',function (Y) {
var report = Y.get('#report');
//Y.DD.DDM.useShim = true;
//Y.DD.DDM._debugShim = true;
var s = new Y.Slider({
contentBox : '#slider_h_js',
//axis : 'y',
//width: '318px',
railSize: '150px',
min : 37,
max : -218,
value : -136,
//minGutter : -7,
//maxGutter : -30
//thumb: '#t'
});
//s._uiPositionThumb = function () {}
s.after('valueChange',function (e) {
report.set('innerHTML',e.newVal);
});
s.render();//'#slider');
report.set('innerHTML',s.getValue());
Y.get('#size').on('click',function () {
s.set('railSize','155px');
});
Y.get('#val').on('click',function () {
s.set('value',s.getValue() === -92 ? 100 : -92);
});
Y.get('#disable').on('click',function () {
var disabled = !s.get('disabled');
s.set('disabled',disabled);
this.set('value', disabled ? "Enable" : "Disable");
});
});
</script>
</body>
</html>