ASP.NET Telerik控件的jQuery样式

ASP.NET Telerik control styling with jQuery

本文关键字：jQuery 样式 控件 NET Telerik ASP      更新时间：2023-09-26

我有一个radTextBox与CssClass="mandatory"。在jQuery中，我有下一个东西:

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

问题是，在focusout上，我的样式被默认情况下控件在不同事件上具有的类"覆盖"。我还在jQuery中尝试了下一个东西:

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

但是仍然没有，类在添加后立即被删除。那么，如何使用jQuery为遥控器控件添加样式呢?

完成此任务的最简单方法是使用RadTextBox的客户端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对象的样式。有几种不同的样式，但似乎您要寻找的是EnabledStyle。要直接应用一些CSS，只需使用样式数组的第一个元素。或者你可以应用一个CSSClass: 
textBox.get_styles().EnabledStyle[1] += " mandatoryErr";

您将访问样式数组中的第二个元素。这里你可以使用mandatoryErr be(例如)

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

!important标签只是为了增加CSS规则的专一性，否则它将不会被应用(如果你使用内置样式)。

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

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

        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

相关文章：