Примеры JQuery Slider с классическим ASP? - PullRequest
Новая
       14

Примеры JQuery Slider с классическим ASP?

2 голосов
/ 22 мая 2009

Я собираюсь внедрить ползунок JQuery в старый магазин Classic ASP, где ползунок будет контролировать диапазон цен. Так что имейте цену, скажем, от 40 до 80 долларов, и вы можете использовать ползунок, чтобы перейти от 50 до 60 долларов ...

Кто-нибудь знает какие-либо примеры использования ползунка с ASP таким образом? Я предполагаю, что храню значения в скрытых значениях, а затем заставляю страницу отправлять значения асинхронно обратно на себя?

Спасибо

Ответы [ 3 ]

6 голосов
/ 22 мая 2009

ползунок дает вам возможность добавить минимальное, максимальное значения, а также шаг ...

попробуйте этот код ниже и внедрите его в свой код ASP 

<code><!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>

все, что вам нужно сделать, это изменить значения на значение 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 (вы можете отредактировать его, добавив / edit к URL ...)

3 голосов
/ 22 мая 2009

Этот ответ для Ajaxing базового кода ...

Процедура:

  1. Выход для ползунка изменен. Теперь он загружает productList.asp, передавая значение из ползунка.
  2. productList.asp - это простая страница ASP, которая собирает "значение" строки запроса и создает таблицу продуктов, используя это значение.
  3. Сейчас он получает только QueryString и заполняет 4 продукта этим значением.

Код:

slider.html 

<code><!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>

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 (load ("productList.asp #prdTableList" ...), а не всю страницу productList.asp, поэтому не будет проблем с наличием тегов HTML хороший способ отладки, потому что все, что нам нужно сделать на этой странице, это вызвать ее со строкой запроса значения, например: 

productList.asp?value=47

Выход:

альтернативный текст http://www.balexandre.com/temp/2009-05-22_1311.png

0 голосов
/ 22 мая 2009

Конечно, просто используйте слайдер jQuery: http://docs.jquery.com/UI/Slider или любой из слайдеров, найденных в Google. http://www.keepthewebweird.com/demo/slider/

...