Как изменить стили css пользовательского виджета jquery?

это мой код, до сих пор я пытался. Я создаю wiget, он содержит текстовое поле со строками строк. Я хочу изменить цвет фона виджета для Onfocus и OnfocusOut evets. как это сделать?Как изменить стили css пользовательского виджета jquery?

<!doctype html> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Widget - Default functionality</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>   

    </head> 
    <body> 

      <script> 
     $(function() { 


      $.widget("iP.MultilineText", { 
       _create: function(){ 
        this._textarea = $("<textarea rows ='5'>"); 

        this._textarea.css("background-size","100% 13px"); 
        this._textarea.css("border","none"); 
        this._textarea.css("font-size","12"); 
        this._textarea.css("line-height","12px"); 
        this._textarea.css("background-image","linear-gradient(#33ccff, #33ccff 12px, #ffffff 12px, #ccc 13px, white 13px)"); 
//     this._textarea.css("focus{outline: none;}""); 
        this._textarea.focus(function(){ 
         this._textarea.css('background-color':'yellow')}); //<---- this is the //palce the code should come to change color while focus 

        this._textarea.focusout(function(){alert('focust out')}); 
       $(this.element).append(this._textarea); 
       } 
      }); 

      $("#mulText").MultilineText();   

     }); 
     </script> 

      <div id="mulText" ></div> 

    </body> 
</html>

источник

2014-11-07 azad

Вы можете использовать следующий код для обоих focus и focusout

this._textarea.focus(function(){ 
    $(this).css('background-image','linear-gradient(rgb(255, 255, 0), rgb(255, 255, 0) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')}); 

this._textarea.focusout(function(){ 
    $(this).css('background-image','linear-gradient(rgb(51, 204, 255), rgb(51, 204, 255) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)') 
});

источник

2014-11-07 09:28:17

Как получить текст этого виджета? – azad

Сколько у вас 'textareas'? –

В этом виджета только один в моем приложении мне нужно добавить несколько экземпляров этого виджета. – azad

вам нужно изменить this к $(this) в вашей focus функции и backgroun-image свойство блокирует вас backgound-color. , поэтому вам нужно положить $ (this) .css ('background-image', 'none');

  this._textarea.focus(function(){ 
       $(this).css('background-image','none'); // add this 
       $(this).css('background-color','yellow'); 
      }); //<---- this is the //palce the code should come to change color while focus

источник

2014-11-07 09:24:21

благодаря @rafail. и как получить доступ к значениям текстовой области? – azad

'$ ('textarea'). Val()' даст вам значение –

Как изменить стили css пользовательского виджета jquery?

ответ

Смежные вопросы