Question

我在我的应用程序中使用telerik控件。我必须更改RadTextbox和RadDatePicker的背景颜色

如何使用jquery或Javascript更改RadTextbox（Telerik文本框）和RadDatePicker（Telerik DatePicker）背景颜色？

Answer 1

我需要动态更改RadDatePicker的CSS类，并且遇到了这个帖子。

http://www.telerik.com/community/forums/aspnet/calendar/how-to-change-css-class-in-javascript.aspx

function changeClass() 
{ 
    var pickerWrapper = $get("<%= RadDatePicker11.ClientID %>_wrapper"); 
    pickerWrapper.className += " myClass"; 
}

我认为更好的方法是更改RadDatePicker的顶级元素的类，而不是深入研究DatePicker组件以更改文本字段的类。

这是我最终用于我的目的的代码。

我正在使用WebBlue作为我的telerik风格。

function setDatePickerRequired(o, required)
{

    if (required)
    {
        $get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue RequiredDate";
    }
    else
    {
        $get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue";
    }

}

我的css

div.RadPicker_WebBlue.RequiredDate input.riTextBox
{
    background-image: url(images/required-tick.gif);
    background-position: right top;
    background-repeat: no-repeat;
}

富

Answer 2

您可以为大多数Telerik控件指定“皮肤”，这些控件通常来自通用的默认样式表，因此如果您只想重新设置控件，则可以创建自己的皮肤。

如果您真的想使用JavaScript动态执行，那么您可以这样做。

以RadCalendar / DatePicker为例，可以在此处找到CSS类的名称及其引用的内容：http://www.telerik.com/help/aspnet-ajax/calendar-css-skin-file-selectors.html。

如果要更改特定样式，则需要使用自己的CSS替换CSS类，或者应用覆盖样式表的内联样式。

要使用jQuery CSS应用自己的样式，只需使用类似：

$(".your-telerik-css-class").css("background-color","red");

编辑：此链接将帮助您了解控件的结构，以查看这些类会产生什么影响：http://www.telerik.com/help/aspnet-ajax/calendar-understanding-skin-css-file.html

Answer 3

我的解决方案如下：

ASPX页码

 <asp:ButtonID="Button"runat="server"  OnClientClick="click1();return false;"
          Text="click"/> 
      <telerik:RadDatePickerID="RadDatePicker1"runat="server"> 
          <DateInput> 
          </DateInput> 
      </telerik:RadDatePicker> 
      <telerik:RadTextBoxID="RadTextBox1"runat="server"> 
      </telerik:RadTextBox>

<强>的Javascript

<script type="text/javascript"> 
function click1() 
 { 
     varpicker = $find("<%= RadDatePicker1.ClientID %>"); 
     vartextbox = $find("<%= RadTextBox1.ClientID %>"); 
     textbox.get_styles().EnabledStyle[0] += "background-color: red;"; 
     textbox.updateCssClass(); 
     picker.get_dateInput()._textBoxElement.style.backgroundColor = "yellow"; 
 } 
</script>

通过改变telerik控件的BG颜色

使用jquery或Javascript更改RadTextbox（Telerik文本框）和RadDatePicker（Telerik DatePicker）背景颜色

3 个答案: