jquery-ui - 使用经典 ASP 的 JQuery slider 示例?

标签 jquery-ui asp-classic slider

我将尝试将 JQuery slider 实现到旧的经典 ASP 商店中,其中 slider 将控制价格范围。因此,如果价格在 40 美元到 80 美元之间,您可以使用 slider 在 50 美元到 60 美元之间调整...

有人知道以这种方式在 ASP 中使用 slider 的示例吗?我猜我将这些值存储在隐藏值中,然后让页面将值异步发布回自身?

谢谢

最佳答案

slider 使您有机会添加最小值、最大值以及步骤...

尝试下面的代码并在您的 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 中添加 /edit 来编辑它...)

关于jquery-ui - 使用经典 ASP 的 JQuery slider 示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/896850/

相关文章:

JqueryUI Slider 与 Sortable 冲突

javascript - 移动 d3.js slider 的 handle

javascript - 当 react 元素插入 DOM 时高亮显示它们 - Meteor

css - 调整 jQueryUI 小部件的大小

asp-classic - 获取变量名 Classic ASP

javascript - 不从asp classic中的存储过程捕获返回值

iis - 启用传统ASP网站的日志记录

Jquery UI 元素拖放位置在第一次放置时跳转

jquery-ui - jqueryui 自动完成 : lists entries with search terms in middle

javascript - 滑动面板 onClick