Question

我有一个带有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控件添加样式呢？

Answer 1

实现此目标的最简单方法是使用RadTextBox的Client-side API挂钩客户端上的各种样式选项。这是一个基本上是您的初始代码并将其应用于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";

您将访问styles数组中的第二个元素。在这里你可以强制使用（例如）：

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

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

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

Answer 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

ASP.NET Telerik使用jQuery控制样式

2 个答案: