-
Notifications
You must be signed in to change notification settings - Fork 64
/
render-htl.html
executable file
·53 lines (48 loc) · 2.16 KB
/
render-htl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
<meta name="description" content="Slider组件 render模式 水平示例" />
<title>Slider组件 render模式 水平示例</title>
<link rel="stylesheet" type="text/css" href="../../../resources/default/common/common.css"/>
<link rel="stylesheet" href="../../../resources/default/magic.control.Slider/magic.Slider.css"/>
<script src="../../../src/import.php?f=baidu.dom.ready,magic.Slider,magic.control.slider.$fx,magic.control.slider.$cache" type="text/javascript"></script>
<style type="text/css">
.view{margin:20px 20px 10px;width:60%;}
.wrap{margin:10px auto;font-size:12px;}
</style>
</head>
<body>
<div class="demo">
<div id="view1" class="view">
<div class="wrap">
<p>精确度:0</p>
<button onclick="s1.enable();">启用</button>
<button onclick="s1.disable();">禁用</button>
<p>animate: <input type="checkbox" value="yes" onclick="s1._info.fx.enable = this.checked;"></p>
</div>
<div id="s1"></div>
</div>
<div id="view2" class="view">
<div class="wrap">
<p>精确度:0.25</p>
<button onclick="s2.enable();">启用</button>
<button onclick="s2.disable();">禁用</button>
<p>animate: <input type="checkbox" value="yes" onclick="s2._info.fx.enable = this.checked;"></p>
</div>
<div id="s2"></div>
</div>
</div>
<script type="text/javascript">
baidu.dom.ready(function(){
var s1 = new magic.Slider({orientation:'horizonal', direction:'forward', fx:{enable: false}, cache:{enable:true}});
var s2 = new magic.Slider({accuracy:0.25, orientation:'horizonal', direction:'backward', fx:{enable: false}, cache:{enable:true}});
s1.render('s1');
s2.render('s2');
s1.setCache(0.5);
s1.setRange(0.5);
s2.setCache(1);
});
</script>
</body>
</html>