slider/test/basic.html

	basic.html revision b32d148b0052e1f874e9bc9803bef729bf859d97
<!doctype html>
<html>
<head>
    <title>Test Page</title>
    <link type="text/css" rel="stylesheet" href="/assets/dpSyntaxHighlighter.css">
    <link type="text/css" rel="stylesheet" href="/3.x/build/slider/assets/skins/sam/slider.css">
    <style type="text/css">
        .yui-slider {
            border: 1px solid red;
            margin: 10px;
        }

        .markup {
            margin-left: 300px;
        }
    </style>
</head>
<body class="yui-skin-sam">
<div class="markup">
    <div id="slider">
        <div class="yui-slider-rail">
            <img class="yui-slider-thumb" src="/3.x/build/slider/assets/skins/sam/thumb-classic-x.png">
        </div>
    </div>

    <input type="button" id="size" value="Change size">
    <input type="button" id="val" value="Set Value">
    <input type="button" id="disable" value="Disable">
    <div id="report">0</div>
</div>

<script type="text/javascript" src="/3.x/build/yui/yui.js"></script>
<script type="text/javascript">
var Y = YUI({
    base:'/3.x/build/',
    filter: 'debug',
    logExclude:{
        base:true,
        event:true,
        attribute:true
    }
});

Y.Env.meta.modules.slider = {
    requires : ['widget','dd-constrain'],
    skinnable : true
}

Y.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',
    //axis : 'y',
    width: '318px',
    //railSize: '318px',
    min : 37,
    max : -218,
    value : -136
    //thumbImage : Y.config.base+'slider/assets/skins/sam/thumb-classic-x.png'
    //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>
<script type="text/javascript" src="/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" src="/assets/dpSyntaxHighlightExample.js"></script>
</body>
</html>