使用 jQuery 的 ASP.NET Telerik 控件样式答案

【问题标题】：ASP.NET Telerik control styling with jQuery使用 jQuery 的 ASP.NET Telerik 控件样式
【发布时间】：2012-01-18 08:38:07
【问题描述】：

我有一个 CssClass="mandatory" 的 radTextBox。在 jQuery 中，我有下一件事：

$(".mandatory").focusout( function () {
  if($(this).val() == "") $(this).css("border", "1px solid #ff0000");
});

问题在于，在焦点输出时，我的样式被控件在不同事件上默认具有的类“覆盖”。我也在jQuery中尝试了接下来的事情：

$(".mandatory").focusout( function () {
  if($(this).val() == "") $(this).addClass("mandatoryErr");
});

但仍然没有，添加后立即删除该类。那么如何使用 jQuery 为 Teleriks 控件添加样式呢？

【问题讨论】：

标签： javascript jquery asp.net css telerik

【解决方案1】：

完成此操作的最简单方法是使用 RadTextBox 的 Client-side API 连接到客户端上的各种样式选项。这是一个 sn-p，它基本上采用您的初始代码并将其应用于 RadTextBox API：

        <script type="text/javascript">
        function ChangeBorder () {
            var textBox = $find("<%= RadTextBox1.ClientID %>");
            if (textBox.get_value() == "") {
                textBox.get_styles().EnabledStyle[0] += "border-color: #ff0000";
                textBox.updateCssClass();
            }
            else {
                //revert back to old CSS
            }
        }
    </script>

    <telerik:RadTextBox ID="RadTextBox1" runat="server" ClientEvents-OnBlur="ChangeBorder">
    </telerik:RadTextBox>

重要的是我们正在订阅 RadTextBox (OnBlur) 的客户端事件。然后我们访问 RadTextBox 客户端对象，检查值是否为“”，然后访问 RadTextBox 对象的样式。有several different styles，但似乎您正在寻找 EnabledStyle。要直接应用一些 CSS，只需使用样式数组的第一个元素。或者，您可以应用 CSSClass：

textBox.get_styles().EnabledStyle[1] += " mandatoryErr";

您将在哪里访问样式数组中的第二个元素。在这里你可以有强制错误（例如）：

    <style>
    .mandatoryErr
    {
        border-color: #ff0000 !important;
    }
</style>

!important 标记只是为了增加 CSS 规则的特异性，否则将不会应用（如果您使用的是内置样式）。

如果您正在寻找有关所有这些的更多信息，链接的文档文章应该会有所帮助。您还可以使用 Chrome 开发工具和 FireBug 来检查上面的 textBox 变量并查看 _styles 属性的内容:)

【讨论】：

【解决方案2】：

我已经做到了，并且为我工作。

        function txtRadNum_change(e){
            var mustAddColor = e.get_value() == "";
            e.get_styles().EnabledStyle[0] = getStyle(e.get_styles().EnabledStyle[0], mustAddColor);
            e.get_styles().FocusedStyle[0] = getStyle(e.get_styles().FocusedStyle[0], mustAddColor);
            e.get_styles().HoveredStyle[0] = getStyle(e.get_styles().HoveredStyle[0], mustAddColor);
        }

        function getStyle(originalStyle, mustAddColor){
            var lstStyles = originalStyle.split(';');
            var newEnabledStyle = "";
            $.each(lstStyles, function(idx, style){
                if(style.indexOf("background-color") < 0 && style != ""){
                    newEnabledStyle += style + ";";
                }
            });

            if(mustAddColor){
                newEnabledStyle += "background-color:#FC4C02;"
            }

            return newEnabledStyle;
        }

您必须覆盖 EnabledStyle、FocusedStyle 和 HoveredStyle http://docs.telerik.com/devtools/aspnet-ajax/controls/input/client-side-programming/inputstyles-client-object

【讨论】：