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/

相关文章:

javascript - 如何让数字每秒倒数

jquery-ui - 在 Knockout foreach 中忽略 JQuery UI 高亮效果颜色参数

Javascript:使用jquery使div到达浏览器的顶部边缘时始终保持在顶部

javascript - 使用小部件工厂扩展时,JQuery UI Droppable 贪婪选项不起作用

mysql - 从数据库中获取行数然后将其转换为数字

asp-classic - 经典 ASP 中的线程 sleep ?

html - 如何在 slider 中使用中继器

javascript - 通过滚动或 slider 比较/查看 2 行图像

javascript - 在没有 session 变量的情况下在经典 asp 中发布和取回 html 元素进行验证的最佳方法

jquery - 带垂直拇指托盘的超大全屏 slider