Exemples de curseurs JQuery avec ASP classique?

Je suis sur le point d'essayer d'implémenter le curseur JQuery dans un ancien magasin ASP classique, où le curseur contrôlerait la fourchette de prix. Donc, un prix entre 40 $ et 80 $ et vous pouvez utiliser le curseur pour aller entre 50 $ et 60 $ ...Exemples de curseurs JQuery avec ASP classique?

Quelqu'un sait-il des exemples d'utilisation du curseur avec ASP de cette façon? Je devine que je stocke les valeurs dans des valeurs cachées, puis rend la page publie les valeurs async sur lui-même?

Merci

Source

2009-05-22 leen3o

le curseur, vous donne la possibilité d'ajouter un minimum, les valeurs maximales et l'étape ...

essayer ce code ci-dessous et la mettre en œuvre dans votre code 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>

tout ce que vous doivent faire est de changer les valeurs avec la valeur asp lorsque vous chargez la page comme

$("#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); 
     } 
    });

voir ce code en direct dans JSBin (vous pouvez le modifier en ajoutant /modifier à l'URL ...)

Source

2009-05-22 08:42:25 balexandre

Cest fantastique! Merci pour le code .. Puis-je être effronté et vous demander une chose de plus, comment puis-je afficher cette valeur sur la page? Je sais que c'est facile avec .NET, mais quand les utilisateurs déplacent le (s) curseur (s), j'en ai besoin pour afficher la ou les valeurs dans la requête SQL afin qu'elle sache quels produits afficher. Merci encore de prendre le temps de poster l'exemple de code! – leen3o

laissez-moi essayer si ce que vous dites est: vous voulez présenter une liste de produits en fonction de cette valeur de sortie à la volée (ajaxing it)? – balexandre

comment affichez-vous cette liste de produits? Tableau, UL, GridView (.NET)? – balexandre

Bien sûr, il suffit d'utiliser le curseur jQuery: http://docs.jquery.com/UI/Slider ou l'un des curseurs trouvés avec Google. http://www.keepthewebweird.com/demo/slider/

Source

2009-05-22 08:28:50

Cette réponse est pour Ajaxing le code de base ...

Procédure:

La sortie du curseur a été modifiée. Il charge maintenant un productList.asp en passant la valeur du curseur.
La propriété productList.asp est une page ASP simple qui récupère la "valeur" de la chaîne de requête et crée une table de produits utilisant cette valeur.
À l'heure actuelle, il obtient seulement la QueryString et remplit les 4 produits avec cette valeur.

code:

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>

Remarque: Je ne charge que la sortie #prdTableList (load ("productList.asp #prdTableList" ...), et non l'intégralité de productList.Page asp, donc il n'y aura pas de problème d'avoir des balises HTML et est une bonne façon de debug, car tout ce que nous devons faire dans cette page est d'appeler avec la valeur chaîne de requête comme:

productList.asp?value=47

sortie:

alt text http://www.balexandre.com/temp/2009-05-22_1311.png

Source

2009-05-22 09:45:30 balexandre

Il s'agit d'une bande passante inefficace. Une solution JSON serait mieux pour cela. Il y a certainement des classes ASP JSON classiques, comme http://www.webdevbros.net/2007/04/26/generate-json-from-asp-datatypes/ –

il a demandé quelque chose de facile et pratique ... JSON n'est pas facile car vous devez changer beaucoup de choses dans le code ... – balexandre

Exemples de curseurs JQuery avec ASP classique?

Répondre

Questions connexes