Blame view

frontend/web/js/TrackBar/examples.html 4.24 KB
18b850c7   Administrator   Importers CRUD
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" /> &mdash; <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>