javascript - 使用简单的 javascript/jQuery UI 元素

Question

我没有使用 jQuery 或 Javascript 的经验，所以我在文件中选择了这一点。我必须在 .ASCX 页面中放置一个 slider 。这是该 .ascx 文件中的代码的一部分:

<tr>
    <td style="width: 140px; height: 25px;"><asp:Label ID="lblHeader" runat="server" CssClass="InputHeader" meta:resourcekey="lblHeader" /></td>
    <td><asp:Label ID="lblSliderLeft" runat="server" Text="L" CssClass="sliderLabelLeft" />
        <input type="range" name="slider1" id="slider1" style="width:210px" value="1" min="0" max="1" step="1" />
        <asp:Label ID="lblSliderRight" runat="server" Text="R" CssClass="sliderLabelRight" />
    </td>
    <td></td>
</tr>

在页面顶部，我添加了以下内容:

<!-- Load jQuery and jQuery UI -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load the jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</body>

现在我的问题是，我该如何使用这个 slider ？如何从 .cs 文件中的函数设置其值？如何在 .cs 文件中获取它的值？

Answer 1

这里有一个 JSfiddle 可以回答您的问题。

http://jsfiddle.net/oqLbLn1s/6/

<tr>
    <td style="width: 140px; height: 25px;"><asp:Label ID="lblHeader" runat="server" CssClass="InputHeader" meta:resourcekey="lblHeader" /></td>
    <td><asp:Label ID="lblLeft" runat="server" Text="L" CssClass="sliderLabelLeft" />
        <div id="slider" style="margin-top:100px;"></div>
        <asp:Label ID="lblRight" runat="server" Text="R" CssClass="sliderLabelRight" />
    </td>
    <td><div id="amount" style="padding: 10px; border: 3px solid silver; text-align:center;">50</div></td>
</tr>



// When the browser is ready...
$(function () {
    // Create a new jQuery UI Slider element
    // and set some default parameters.
    $("#slider").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            // While sliding, update the value in the #amount div element
            var value = $("#slider").slider("value"); // You can use value anywhere
            $("#amount").text(value);
            $("#amount").css("font-size", value);
        }
    });
    value = $("#slider").slider("value");
    $("#amount").text(value);
    $("#amount").css("font-size", value);
});