Ticket #4404: jquery.slider.html

File jquery.slider.html, 3.2 KB (added by kupokomapa, 11 years ago)
Line 
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>