JQueryスライダーを事例とクラシックASP?

StackOverflow https://stackoverflow.com/questions/896850

  •  23-08-2019
  •  | 
  •  

質問

ただしみを実施するJQueryスライダーへ古いクラシックASP店のスライダーが制御しまいました。い価格とい$40、80ドルをご用意させて頂き、スライダーのようにあっちこっちと$50$60...

誰にも知らせるスライダーをASPです。私は推測し店における価値の隠れた価値を、そのページのポストの値を非同期に戻りまする。

感謝

役に立ちましたか？

解決

スライダーはあなたにも、ステップを最大値を最小値を追加するための機会を与えてくれます...

以下のコードを試してみて、自分の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 €</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に...）

他のヒント

この答えはAjaxingのベースコー---

手順:

  1. 出力のスライダーを変更します。今を読み込むproductList.aspの価値からのライダーです。
  2. のproductList.aspはASPページを拾のクエリ文字列を"価値"をテーブルを使用した製品のなければならないかを指します。
  3. 現在ではQueryStringは、populatesの4製品を受け持つことになります。

コード:

slider.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 €</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>

productList.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出力(負荷("productList.asp#prdTableList"リソースをカスタマイズなのproductList.aspページではありませんが問題のHTMLタグをデバッグでいるページは電話でのクエリー文字列のように:

productList.asp?value=47

出力：

altテキストhttp://www.balexandre.com/temp/2009-05-22_1311.png

確かに、ちょうどjQueryのスライダーを使用します。 http://docs.jquery.com/UI/SliderこちらやGoogleで見つかったスライダーのいずれか。 http://www.keepthewebweird.com/demo/slider/する

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top