Question

我正在研究搜索功能。我需要使用搜索栏选择最低价格和最高价格。我在谷歌搜索了很多，但我发现有一个值的搜索栏。下面是我得到的代码。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script>
      $(document).ready(function () {
          $("#slider").slider(
          {
              min: 0,
              max: 100,
              step: 1,
              change: showValue

          });
          $("#update").click(function () {
              $("#slider").slider("option", "value", $("#seekTo").val());

          });
          function showValue(event, ui) {
              $("#val").html(ui.value);
          }
      });
  </script>
</head>
<body style="font-size:62.5%;">
  <p>
  The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
  </p>
  <p>
  This sample demonstrates the simple usage of the slider seek to function.
  For more information about slider, please procedd to http://docs.jquery.com/UI/Slider
  </p>
<div id="slider"></div>
Seek To : <input id="seekTo" type="text" value="10" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0</span>
</body>
</html>

＆＃13;

有人帮助我如何使用单个条形图来获得最小值和最大值..

我正在使用PHP网站。如果您在php中有任何示例代码，那将会有所帮助..

额外的一个：

还有一个疑问，如果这不是一系列的值，如果它就像A A + B B + C C + ......我们怎样才能把它们带到这种类型的搜索栏中..

Answer 1

使用range: true选项！

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script>
      $(document).ready(function () {
          $("#slider").slider(
          {
              range: true,
              min: 0,
              max: 100,
              step: 1,
              values: [10, 50],
              change: showValue
          });
          $("#update").click(function () {
              $("#slider").slider("option", "values", [$("#seekTo1").val(), $("#seekTo2").val()]);

          });
          function showValue(event, ui) {
              $("#val").html(ui.values[0] + " - " + ui.values[1]);
          }
      });
  </script>
</head>
<body style="font-size:62.5%;">
  <p>
  The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
  </p>
  <p>
  This sample demonstrates the simple usage of the slider seek to function.
  For more information about slider, please proceed to http://docs.jquery.com/UI/Slider
  </p>
<div id="slider"></div>
Seek To : <input id="seekTo1" type="text" value="10" /> <input id="seekTo2" type="text" value="50" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0 - 50</span>
</body>
</html>

具有两个值范围（最小值和最大值）的搜索栏

1 个答案: