如何更改自定义jquery小部件的CSS样式？
[英]how to change css styles of custom jquery widget?
问题描述
this is my code so far I tried.I create a wiget it contain a textarea with row lines. 
这是到目前为止我尝试过的代码。我创建了一个wiget，其中包含带有行行的textarea。 I want to change this widgets backround color for Onfocus and OnfocusOut evets. 我想为Onfocus和OnfocusOut evets更改此小部件的背景颜色。 how to do that? 怎么做？
<!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>
2 个解决方案
解决方案1
1 2014-11-07 09:24:21
you need to change this to $(this) in your focus function and backgroun-image property is blocking you backgound-color . 你需要改变this以$(this)在focus功能和backgroun-image属性阻止你backgound-color 。 so you need to put $(this).css('background-image','none'); 所以你需要放$（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
解决方案2
1 已采纳 2014-11-07 09:28:17
You can use the below code for both focus and focusout 您可以将以下代码用于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)')
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.