2

JQueryスライダーを古いClassicASPストアに実装しようとしています。このストアでは、スライダーが価格帯を制御します。したがって、たとえば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 に答える
0

もちろん、jQuery Slider: http://docs.jquery.com/UI/Sliderまたは Google にあるスライダーのいずれかを使用してください。http://www.keepthewebweird.com/demo/slider/

于 2009-05-22T08:28:50.167 に答える