Примеры слайдеров JQuery с классическим ASP?

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

  •  23-08-2019
  •  | 
  •  

Вопрос

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

productList.asp?value=47

Выход:

альтернативный текст 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