Question

现在iam按照以下价格过滤代码显示我的产品：

<ul>
  <li><a href="[server.url type='fullpage' query='price=-50']">Less than $50</a></li>
  <li><a href="[server.url type='fullpage' query='price=50-100']">$50 ~ $100</a></li>
  <li><a href="[server.url type='fullpage' query='price=100-500']">$100 ~ $500</a></li>
  <li><a href="[server.url type='fullpage' query='price=500-1000']">$500 ~ $1000</a></li>
  <li><a href="[server.url type='fullpage' query='price=1000-2000']">$1000 ~ $2000</a></li>
  <li><a href="[server.url type='fullpage' query='price=2000-']">More than $2000</a></li>
<ul>

在滑块下方，Iam想要这样：

<form method="get" style="margin-top:10px">

      £<input type="text" size="4" id="minprice" value=""> - £<input type="text" size="4" id="maxprice" value="">
<input type="hidden" name="price" id="pricefilter">

<input type="submit" value="GO" id="pricego" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</form>

这是JQuery代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.8.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.slider.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>
</head>
<body>

<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->





</body>
</html>

您可以在此处获取该代码： http://jqueryui.com/demos/slider/#range

想要让我的滑块像这样:(左侧的Fliter by Price小部件）

http://bag-saver.com/uk/shop/black-handbags/

作为我对这个JQuery的新手，CSS Iam无法理解如何实现我的输出......每当滑块移动时，我的产品应按照所选的价格过滤范围显示..

因此，任何建议或代码都将很高兴...

使用JQuery Slider

0 个答案: