examples.html
4.24 KB
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>TrackBar</title>
<style type="text/css">
body, html, h1 {padding:0; margin:0; font:12px arial;}
body {padding:10px 15px;}
h1 {font:bold 20px Arial; color:#A1A1A1; margin:30px 0 10px 0;}
input {border:1px solid #666; font:12px arial; width:50px;}
div {padding-bottom:15px; font:11px tahoma;}
</style>
<link rel="stylesheet" type="text/css" href="trackbar.css" />
<script type="text/javascript" src="trackbar.js"></script>
</head>
<body>
<h1>Óêàæèòå ñòîèìîñòü ïóòåâêè íà äâîèõ</h1>
<div>width: 250, roundUp: 50, leftLimit: 100, leftValue: 500, rightLimit: 5000, rightValue: 1500</div>
<script type="text/javascript">
//<![CDATA[
trackbar.getObject('one').init({
onMove : function() {
},
width : 250, // px
leftLimit : 100, // unit of value
leftValue : 500, // unit of value
rightLimit : 5000, // unit of value
rightValue : 1500, // unit of value
roundUp : 50, // unit of value
hehe : ":-)"
});
// -->
</script>
<h1>Óêàæèòå ãîä ðîæäåíèÿ</h1>
<div>dual: false, width: 300, leftLimit: 1900, leftValue: 1950, rightLimit: 2000, rightValue: 1980</div>
<script type="text/javascript">
//<![CDATA[
trackbar.getObject('two').init({
onMove : function() {
},
dual : false, // two intervals
width : 300, // px
leftLimit : 1900, // unit of value
leftValue : 1950, // unit of value
rightLimit : 2000, // unit of value
rightValue : 1980, // unit of value
hehe : ":-)"
});
// -->
</script>
<h1>Âûáåðèòå öâåò RGB</h1>
<div>dual: false, width: 300, leftValue: 0, rightLimit: 255, rightValue: 0</div>
<div id="colorId" style="border:1px solid #000; background-color:#000; width:50px; height:50px;"></div>
<script type="text/javascript">
//<![CDATA[
// User function
rr = '00';
gg = '00';
bb = '00';
function setColor(r, g, b) {
if (r != null) rr = decToHexColor(r);
if (g != null) gg = decToHexColor(g);
if (b != null) bb = decToHexColor(b);
document.getElementById("colorId").style.backgroundColor = "#" + rr + gg + bb;
}
function decToHexColor(dec) {
var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
dec = parseInt(dec);
return hex[parseInt(dec / 16)] + hex[dec % 16];
}
trackbar.getObject('color_R').init({
onMove : function() {
setColor(this.leftValue, null, null);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
});
trackbar.getObject('color_G').init({
onMove : function() {
setColor(null, this.leftValue, null);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
});
trackbar.getObject('color_B').init({
onMove : function() {
setColor(null, null, this.leftValue);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
});
// -->
</script>
<h1>Âûáåðèòå áóêâó àëôàâèòà ;-)</h1>
<div>width: 200, leftValue: 0, rightLimit: 32, rightValue: 32, clearLimits: true</div>
<form action="#">
<input type="text" id="firstChar" value="À" readonly="readonly" /> — <input type="text" id="secondChar" value="ß" readonly="readonly" />
</form>
<br/>
<script type="text/javascript">
//<![CDATA[
// User function
function setWord(l, r) {
var rus = ['',
'À','Á','Â','Ã','Ä','Å','¨','Æ','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï',
'Ð','Ñ','Ò','Ó','Ô','Õ','Ö','×','Ø','Ù','Ú','Û','Ü','Ý','Þ','ß'
];
document.getElementById("firstChar").value = rus[l];
document.getElementById("secondChar").value = rus[r];
}
trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue, this.rightValue);
},
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 33, // unit of value
rightValue : 33, // unit of value
clearLimits : true,
clearValues : true,
hehe : ":-)"
});
// -->
</script>
</body>
</html>