2

我将尝试在旧的 Classic ASP 商店中实现 JQuery 滑块，滑块将控制价格范围。所以价格在 40 美元到 80 美元之间，您可以使用滑块在 50 美元到 60 美元之间移动……

任何人都知道以这种方式在 ASP 中使用滑块的任何示例吗？我猜我将值存储在隐藏值中，然后让页面将值异步发布回自身？

谢谢

4

3 回答 3

6

滑块让您有机会添加最小值、最大值以及步骤...

试试下面的代码并在你的 ASP 代码中实现它

<!DOCTYPE html> 
<html> 
 <head>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

  <style type="text/css"> 
    #slider { margin: 10px; width: 300px; }
    body { font-size: 20px; }
  </style>

  <script type="text/javascript">
  $(document).ready(function(){

    $("pre a").bind("click", function() {   // show current hidden value
        alert($("#prdRange").val());
    });

    $("#slider").slider({ 
            min: 40,            // minimum amount
            max: 80,            // maximum amount
            step: ((80 - 40) / 10),     // steps ... 
            slide: function(event, ui) {    // fire this when change
                $("#lbl").text(ui.value + ",00 €");
                $("#prdRange").val(ui.value);
            }
        });
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="slider"></div>
<span id="lbl">40,00 €&lt;/span>
<input type="hidden" id="prdRange" value="40" />

<pre>min: 40 Euros, max: 80 Euros, <a href="#">range chosen</a></pre>

</body>
</html>

您所要做的就是在加载页面时使用 asp 值更改值

$("#slider").slider({ 
        min: <%= ProductMinValue %>,                    // minimum amount
        max: <%= ProductMaxValue %>,                    // maximum amount
        step: <%= ProductStepValue %>,     // steps ... 
        slide: function(event, ui) {    // fire this when change
            $("#lbl").text(ui.value + ",00 €");
            $("#prdRange").val(ui.value);
        }
    });

在JSBin中查看此代码（您可以通过在 URL 中添加/edit来编辑它...）

于 2009-05-22T08:42:25.473 回答
3

这个答案适用于 Ajaxing 基本代码......

程序：

  1. 滑块的输出发生了变化。它现在加载一个 productList.asp，传递来自滑块的值。
  2. productList.asp 是一个简单的 ASP 页面，它获取查询字符串“值”并使用该值构建产品表。
  3. 现在它只获取 QueryString 并使用该值填充 4 个产品。

代码：

滑块.html

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
    #slider { margin: 10px; width: 300px; }
    #lbl { font-size: 22px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){

    $("pre a").bind("click", function() {   // show current hidden value
        alert($("#prdRange").val());
    });

    $("#slider").slider({ 
            min: 40,                    // minimum amount
            max: 80,                    // maximum amount
            step: ((80 - 40) / 10),     // steps ... 
            slide: function(event, ui) {    // fire this when change
                var newValue = ui.value;
                $("#lbl").text(newValue + ",00 €");
                $("#prdRange").val(newValue);

                $("#prdList").load("productList.asp #prdTableList", { 'value' : newValue }, function(){
                   //alert("products in range of " + newValue + ",00 € loaded");
                 });
            }
        });
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="slider"></div>
<span id="lbl">40,00 €&lt;/span>
<input type="hidden" id="prdRange" value="40" />

<pre>min: 40 Euros, max: 80 Euros, <a href="#">range chosen</a></pre>

<div id="prdList"></div>

</body>
</html>

产品列表.asp

<%
    Dim newValue    
    newValue = Request("value") & ",00 &euro;"
%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="prdTableList">
    <table style="width:100%;">
        <tr>
            <td style="width:50%;">Product</td>
            <td>Price</td>
        </tr>
        <tr>
            <td><a href="#">PRD 001<a></td>
            <td><%= newValue%></td>
        </tr>
        <tr style="background-color:#ccc;">
            <td><a href="#">PRD 002<a></td>
            <td><%= newValue%></td>
        </tr>
        <tr>
            <td><a href="#">PRD 003<a></td>
            <td><%= newValue%></td>
        </tr>
        <tr style="background-color:#ccc;">
            <td><a href="#">PRD 004<a></td>
            <td><%= newValue%></td>
        </tr>
    </table>
  </div>
</body>
</html>

注意：我只加载#prdTableList输出（load("productList.asp #prdTableList"...)，而不是整个productList.asp页面，所以有HTML标签是没有问题的，是一个好方法进行调试，因为我们在该页面中需要做的就是使用值查询字符串调用它，例如：

productList.asp?value=47

输出：

替代文字 http://www.balexandre.com/temp/2009-05-22_1311.png

于 2009-05-22T09:45:30.713 回答
0

当然，只需使用 jQuery 滑块：http ://docs.jquery.com/UI/Slider或 Google 提供的任何滑块。http://www.keepthewebweird.com/demo/slider/

于 2009-05-22T08:28:50.167 回答