изменить цвет фона RadTextbox (Telerik Textbox) и RadDatePicker (Telerik DatePicker), используя jquery или Javascript

Question

Я использую элементы управления telerik в своем приложении.Мне нужно изменить цвета фона RadTextbox и RadDatePicker

как изменить цвет фона RadTextbox (Telerik Textbox) и RadDatePicker (Telerik DatePicker), используя jquery или Javascript?

Answer 1

Мне нужно было динамически изменить класс CSS RadDatePicker, и я наткнулся на эту публикацию.

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 в качестве моего стиля телерика.

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;
}

Rich

Answer 2

Я получаю решение, как показано ниже:

Код страницы 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>

Этим изменением цвета BG элемента управления telerik

Answer 3

Вы можете указать «обложку» для большинства элементов управления Telerik, которая обычно получается из общей таблицы стилей по умолчанию, поэтому, если вы просто хотите изменить стиль элементов управления, вы можете создать свою собственную обложку.

Если вы действительноЕсли вы хотите сделать это на лету с помощью JavaScript, то вы можете это сделать.

На примере RadCalendar / DatePicker имена классов CSS и ссылки на них можно найти здесь: http://www.telerik.com/help/aspnet-ajax/calendar-css-skin-file-selectors.html.

Если вы хотите изменить определенный стиль, вам нужно либо заменить класс CSS своим собственным, либо применить встроенный стиль, который переопределяет таблицу стилей.

Чтобы применить свой собственный стиль, используяjQuery CSS , просто используйте что-то вроде:

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

РЕДАКТИРОВАТЬ: Эта ссылка поможет вам со структурой элемента управления, чтобы увидеть, что классы будут влиять:http://www.telerik.com/help/aspnet-ajax/calendar-understanding-skin-css-file.html