1

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

我有一个滑块，我想指示将用于项目管理与设计的项目预算百分比。因此，在默认位置，项目管理和设计之间的比例为 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>
4

2 回答 2

0

好的，我试过了......我添加了一个按钮来“更新设计值”......所以当点击按钮时，一个 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>

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

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

于 2012-11-26T17:23:23.267 回答
0

将此标签放置在您需要具有设计价值的位置：<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); });
于 2012-11-20T21:04:13.767 回答