<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Carousel 组件">
        <title>Accuracy 使用示例</title>
        <link rel="stylesheet" type="text/css" href="../../demos/common/demo.css">
        <script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
        <script type="text/javascript" src="../../demos/common/demo.js"></script>
        <link rel="stylesheet" type="text/css" href="../../resources/default/common/common.css">
        <link rel="stylesheet" type="text/css" href="../../resources/default/magic.control.Slider/magic.Slider.css">
	    <style type="text/css">
	    	.slider{
	    		margin:20px 0;
	    	}
	        .demo{height:400px;}
	        .view{margin:20px 20px 10px;width:200px;height:50%;float:left;}
	        .wrap{width:200px;margin:10px auto;font-size:12px;}
	        .tang-slider-htl .tang-knob{top:0;margin-left:-11px;background:url("../../resources/default/magic.control.Slider/slider-h-knob.png") no-repeat left top;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../resources/default/magic.control.Slider/slider-h-knob.png");}
	        .tang-slider-htl .tang-knob:hover{background-image:url("../../resources/default/magic.control.Slider/slider-h-knobHover.png");_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../resources/default/magic.control.Slider/slider-h-knobHover.png");}
	        .tang-slider-htl .tang-knob:active{background-image:url("../../resources/default/magic.control.Slider/slider-h-knobHover.png");_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../resources/default/magic.control.Slider/slider-h-knobHover.png");}
	
	        .tang-slider-vtl .tang-knob{top:0;margin-top:-11px;background:url("../../resources/default/magic.control.Slider/slider-v-knob.png") no-repeat left top;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../resources/default/magic.control.Slider/slider-v-knob.png");}
	        .tang-slider-vtl .tang-knob:hover{background-image:url("../../resources/default/magic.control.Slider/slider-v-knobHover.png");_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../resources/default/magic.control.Slider/slider-v-knobHover.png");}
	        .tang-slider-vtl .tang-knob:active{background-image:url("../../resources/default/magic.control.Slider/slider-v-knobHover.png");_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../resources/default/magic.control.Slider/slider-v-knobHover.png");}
	    </style>
        <script type="text/javascript" src='../../src/import.php?f=magic.Slider,magic.control.Slider.$fx,magic.control.Slider.$cache'></script>
    </head>
    <body>
        <div class="content">
            <div class="demo-list">
                <h3>Demo列表</h3>
            </div>
            <div class="main-wrap">
                <div class="demo-wrap">
                    <h3>滑动条组件 --- accuracy</h3>
                    <p>配置参数中的 <b>accuracy</b> 设置滑动条的精确度,0-1之间的小数,默认0</p>
                    <p>观察下面的示例中,accuracy 值不同时,滑动条的区别</p>
                    <div class="demo-view">
                    </div>
                </div>
                <p>滑动条一,精度 <b>0</b> :</p>
               	<div id="slider1" class="slider"></div>
               	<p>滑动条二,精度 <b>0.1</b> :</p>
               	<div id="slider2" class="slider"></div>
               	<p>滑动条三,精度 <b>0.25</b> :</p>
               	<div id="slider3" class="slider"></div>
               	<p>滑动条四,精度 <b>0.5</b> :</p>
               	<div id="slider4" class="slider"></div>
               	<p>滑动条五,精度 <b>1</b> :</p>
               	<div id="slider5" class="slider"></div>
                <div class="console-wrap">
                    <h3>控制台</h3>
                    <div id="J_console" class="console"></div>
                </div>
            </div>
        </div>

        <script>
        	// accuracy : 0
		    var instance1 = new magic.Slider({
		    	direction: 'forward',
		    	accuracy: 0
		    });
		    instance1.render('slider1');
		    instance1.on('slidestop', function(evt){
		    	log('info', "滑动条一,精度 0 ,当前值: " + instance1.getValue());
		    });
		    instance1.on('change', function(evt){
		    	log('info', "滑动条一,精度 0 ,当前值: " + instance1.getValue());
		    });
		    
		    // accuracy : 0.1
		    var instance2 = new magic.Slider({
		    	direction: 'forward',
		    	accuracy: 0.1
		    });
		    instance2.render('slider2');
		    instance2.on('slidestop', function(evt){
		    	log('info', "滑动条二,精度 0.1 ,当前值: " + instance2.getValue());
		    });
		    instance2.on('change', function(evt){
		    	log('info', "滑动条二,精度 0.1 ,当前值: " + instance2.getValue());
		    });
		    // accuracy : 0.25
		    var instance3 = new magic.Slider({
		    	direction: 'forward',
		    	accuracy: 0.25
		    });
		    instance3.render('slider3');
		    instance3.on('slidestop', function(evt){
		    	log('info', "滑动条三,精度 0.25 ,当前值: " + instance3.getValue());
		    });
		    instance3.on('change', function(evt){
		    	log('info', "滑动条三,精度 0.25 ,当前值: " + instance3.getValue());
		    });
		    
		    // accuracy : 0.5
		    var instance4 = new magic.Slider({
		    	direction: 'forward',
		    	accuracy: 0.5
		    });
		    instance4.render('slider4');
		    instance4.on('slidestop', function(evt){
		    	log('info', "滑动条四,精度 0.5 ,当前值: " + instance4.getValue());
		    });
		    instance4.on('change', function(evt){
		    	log('info', "滑动条四,精度 0.5 ,当前值: " + instance4.getValue());
		    });
		    
		    // accuracy : 1
		    var instance5 = new magic.Slider({
		    	direction: 'forward',
		    	accuracy: 1
		    });
		    instance5.render('slider5');
		    instance5.on('slidestop', function(evt){
		    	log('info', "滑动条五,精度 1 ,当前值: " + instance5.getValue());
		    });
		    instance5.on('change', function(evt){
		    	log('info', "滑动条五,精度 1 ,当前值: " + instance5.getValue());
		    });
		    
        </script>
    </body>
</html>
