Question

你会怎么做？我不是一个javascript wiz，所以我还没找到解决方案......

我有一个滑块，我想指出将用于Project Managemant与Design的项目预算的百分比。因此，在默认位置，它将是项目管理和设计之间的50/50分割。如果他们以一种方式滑动它，它会使设计的百分比倾斜，而另一方面，倾向于PM ......你明白了。

因此，常规标签显示0-100的范围。比如，我可以用它作为项目管理预算的百分比。

现在，我想要的是反映设计百分比的第二个标签。（这将是从100减去PM标签值。）你会怎么做？

这是我到目前为止所拥有的：

Campaign Budget:
<br />
<table>
    <tr>
        <td>
            Total Dollars:
        </td>
        <td colspan="3">
            Use the slider to modify the percentage between Project Management and Design.
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="totaldollarsbid" runat="server"></asp:TextBox>
        </td>
        <td>
            WANT DESIGN PERCENTAGE LABEL HERE
        </td>
        <td>
            <asp:TextBox ID="SliderBox" runat="server" Text="50" ClientIDMode="Static"></asp:TextBox>
            <ajaxToolkit:SliderExtender ID="SliderExtender" runat="server" TargetControlID="SliderBox"
                Minimum="0" Maximum="100" BoundControlID="SliderLabel" />
        </td>
        <td>
            <asp:Label ID="SliderLabel" runat="server"></asp:Label>
        </td>
    </tr>
</table>

Answer 1

将此标签放在需要设计值的位置：<asp:Label runat="server" ID="DesignValueLabel" Text="50" />并在页面上添加以下脚本：

<script type="text/javascript">
    function pageLoad() {
        var extender = $find("<%= SliderExtender.ClientID %>");
        extender.remove_valueChanged(updateDesignValue);
        extender.add_valueChanged(updateDesignValue);
    }

    function updateDesignValue(sender, eventArgs) {
        var design = 100 - sender.get_Value();
        $get("<%= DesignValueLabel.ClientID %>").innerHTML = design;
    }
</script>

如果滑块没有放在更新面板中，那么您可以使用下面的脚本代替pageLoad功能（必须放在ScriptManager或ToolkitScriptManager控件之后）

Sys.Application.add_load(function () { $find("<%= SliderExtender.ClientID %>").add_valueChanged(updateDesignValue); });

Answer 2

好的，我试过了......我添加了一个按钮来“更新设计值”...所以当单击按钮时，jquery函数将设计标签更新为100减去PM标签...

<asp:TextBox ID="SliderBox" runat="server" Text="50"></asp:TextBox>

<ajaxToolkit:SliderExtender ID="SliderExtender" runat="server"
TargetControlID="SliderBox"
Minimum="0"
Maximum="100" Steps="21"
BoundControlID="SliderPMLabel" 

/>
<asp:Button ID="btnTest" runat="server" Text="Update Design Value" />
<br /> <asp:Label ID="SliderPMLabel" runat="server"></asp:Label>% Project Management
<br /><asp:Label ID="SliderDesLabel" runat="server"></asp:Label>% Design

<script type="text/javascript">
$(function () {


    $('#<%= btnTest.ClientID %>').click(function () {
    var labelText = $('#<%= SliderPMLabel.ClientID %>').html();
        $('#<%=SliderDesLabel.ClientID%>').html(100 - labelText);
        return false;
    });


}); 


</script>

它工作正常。但是我希望设计标签值随着滑块的移动而动态变化。

一点是当页面加载时不会发生...当用户从下拉列表中选择客户端时，会出现此选择。

AJAX Slider Control ...需要第二个标签来反映百分比

2 个答案: