如何使 jquery UI 滑块在回发时保持滚动位置

Question

所以我在我的页面上实现了 Jquery UI 滑块。滑块的值作为参数输入到 SQL 数据源。单击按钮后，参数将被输入数据源，屏幕上的网格视图将重新绑定。问题是我希望滚动条保持其位置，以便用户知道输入了什么值作为他们当前正在查看的 gridview 的参数。

这是我的滚动条代码：

 <!--Slider bar for investment-->

 <div style="float:right;">
 <script type = "text/javascript">

     $(function () {
         $("#slider").slider({
             value: 100,
             min: 1,
             max: 200,
             step: 1,
             slide: function (event, ui) {                     
                 $("#hiddenInvestment").val(ui.value);
             }
         });
         $("#hiddenInvestment").val($("#slider").slider("value"));
     });        
    </script>

<div class="demo">
<p>
<asp:label runat="server" id="amountlabel" >Investment:    
</asp:label>    
<input name="hiddenInvestment" id="hiddenInvestment" />
<asp:Label runat="server" ID="percentlabel">%</asp:Label>
</p>
<div id="Div1"></div>
</div>
<div class="demo" style="width:100px;">
<div id="slider"></div>
</div>

我认为需要更改的行是“值：100”，但我不确定需要将其更改为什么。有什么建议吗？

Answer 1

您可以在页面上设置隐藏字段。在提交用于回发的表单之前，请使用slider值设置此隐藏字段。在页面加载时，当您初始化 slider 时，会从此隐藏 字段读取初始值。试试这个

$(function () {
     $("#slider").slider({
         value: ($('#sliderVale').val() || 100),
         min: 1,
         max: 200,
         step: 1,
         slide: function (event, ui) {                     
             $("#hiddenInvestment").val(ui.value);
         }
     });
     $("#hiddenInvestment").val($("#slider").slider("value"));
 }); 


 $('form').submit(function(){
     $('#sliderVale').val($("#slider").slider("value"));
 });