1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
---|
2 | <html> |
---|
3 | <head> |
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
5 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
---|
6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script> |
---|
7 | <link rel="stylesheet" type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css"/> |
---|
8 | </head> |
---|
9 | <body> |
---|
10 | |
---|
11 | <div style="width: 190px;"> |
---|
12 | <div id="s_filter_price" style="margin: 10px 10px;"></div> |
---|
13 | <div style="float: right; margin-right: 5px;"> |
---|
14 | <input type="text" name="s[filter][price][max]" id="s_filter_price_max" value="3654" style="width: 35px; text-align: center;" /> лв. <br><font style="color: #A0A0A1">максимална</font> |
---|
15 | </div> |
---|
16 | <div style="float: left; margin-left: 5px;"> |
---|
17 | <input type="text" name="s[filter][price][min]" id="s_filter_price_min" value="50" style="width: 35px; text-align: center;" /> лв. <br><font style="color: #A0A0A1">минимална</font> |
---|
18 | </div> |
---|
19 | <br><br> |
---|
20 | </div> |
---|
21 | |
---|
22 | |
---|
23 | <script type="text/javascript"> |
---|
24 | $(document).ready(function() |
---|
25 | { |
---|
26 | var price_min = 50; // variable |
---|
27 | var price_max = 3589; // variable |
---|
28 | var default_min = 50; // depends on price_min |
---|
29 | var default_max = 3589; // depends on price_max |
---|
30 | var step = (price_max > 1000) ? 50 : (price_max > 100) ? 5 : 1; |
---|
31 | |
---|
32 | $('#s_filter_price').slider( |
---|
33 | { |
---|
34 | 'max': price_max, 'min': price_min, 'values': [default_min, default_max], |
---|
35 | 'restricted': true, 'step': step, animate: true, 'range': (default_min != price_min || default_max != price_max), |
---|
36 | start: function(e, ui) |
---|
37 | { |
---|
38 | $('#s_filter_price').slider('option', 'range', true); |
---|
39 | }, |
---|
40 | stop: function(e, ui) |
---|
41 | { |
---|
42 | $('#s_filter_price_min').val(ui.values[0]); |
---|
43 | $('#s_filter_price_max').val(ui.values[1]); |
---|
44 | |
---|
45 | var enabled = (ui.values[0] != price_min || ui.values[1] != price_max); |
---|
46 | $('#s_filter_price').slider('option', 'range', enabled); |
---|
47 | } |
---|
48 | }); |
---|
49 | |
---|
50 | $("#s_filter_price_min, #s_filter_price_max").change(function() |
---|
51 | { |
---|
52 | var values =[parseFloat($('#s_filter_price_min').val()), parseFloat($('#s_filter_price_max').val())]; |
---|
53 | |
---|
54 | values[1] = (values[1] > price_max) ? price_max : values[1]; |
---|
55 | values[0] = (values[0] >= values[1]) ? values[1] - step : values[0]; |
---|
56 | values[0] = (values[0] < price_min) ? price_min : values[0]; |
---|
57 | |
---|
58 | $('#s_filter_price_min').val(values[0]); |
---|
59 | $('#s_filter_price_max').val(values[1]); |
---|
60 | $('#s_filter_price').slider('option', 'values', values); |
---|
61 | }); |
---|
62 | |
---|
63 | $('#s_filter_price_min, #s_filter_price_max').keypress(function(e) |
---|
64 | { |
---|
65 | // set the value when the 'return' key is detected |
---|
66 | if (e.which === 13) |
---|
67 | { |
---|
68 | var values =[$('#s_filter_price_min').val(), $('#s_filter_price_max').val()]; |
---|
69 | |
---|
70 | values[1] = (values[1] > price_max) ? price_max : values[1]; |
---|
71 | values[0] = (values[0] >= values[1]) ? values[1] - step : values[0]; |
---|
72 | values[0] = (values[0] < price_min) ? price_min : values[0]; |
---|
73 | |
---|
74 | $('#s_filter_price_min').val(values[0]); |
---|
75 | $('#s_filter_price_max').val(values[1]); |
---|
76 | $('#s_filter_price').slider('option', 'values', values); |
---|
77 | } |
---|
78 | }); |
---|
79 | }); |
---|
80 | </script> |
---|
81 | </body> |
---|
82 | </html> |
---|