改变 richselect 的输入颜色

Question

我想知道是否可以在运行时更改输入的颜色。

这是我的 select (Webix ui.richselect)：http://webix.com/snippet/c64f9b12

{ 
  view:"richselect", label:"Status", options:[
    { id:1, value:"Done", $css:"done" },
    { id:2, value:"Processing", $css:"process" },
    { id:3, value:"On hold", $css:"on-hold" },
    { id:4, value:"Failed", $css:"failed" },
  ],
  on:{
    onChange:function(newV, oldV){           
      webix.message("Status changed to "+this.getList().getItem(newV).value)
    }
  }
}

每个 $css 键与应用于项目的 CSS class 相关。

<style>
  .webix_list_item.done { 
    background:#ddf7dd; 
  }
  <!-- . . . -->
  .webix_list_item.webix_selected {
    color:black;
    font-weight:bold
  }
</style>

更改了richselect的值后，我需要将新selected item的背景颜色设置为richselect的背景颜色。

在我看来，可以通过onChange事件来解决，但我不知道具体怎么解决。

有什么建议吗？提前致谢。

Answer 1

这是您的解决方案：

http://webix.com/snippet/08e187a7

1) 首先，动态获取点击元素的 class 名称，以便获取该元素

var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);

2) 接下来，获取该元素的计算背景颜色并将其设置为 "newly selected" 元素。

document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");

我已经写了一行，你可以创建变量并将其分解成更多的语句。说些类似 -

var clicked_bgcolor = window.getComputedStyle(element,null).getPropertyValue("background-color");

document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = clicked_bgcolor;

我更喜欢在一行中完成这两个（如上所述）。

所以你的最终 onChange 代码将是 :

  on:{
    onChange:function(newV, oldV){           
      webix.message("Status changed to "+this.getList().getItem(newV).value);

      var className = ".webix_list_item." + this.getList().getItem(newV).$css;
      var element = document.querySelector(className);
      document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");
    }
  }

如果有任何问题，请告诉我。

PS：尽量多用JQuery，可以避免冗长复杂的JavaScript语句。

Answer 2

感谢@Nikhil 的回答，它帮助我以 webix 的方式在 richselect 上应用我的组合逻辑。

因此，不同之处在于，在 combo 中，我在 input 上应用了样式并且它可以正常工作，但对于 richselect 在输入上应用样式是错误的，我必须在 .webix_inp_static 上应用。

1. CSS

在您的风格中对于 webix_list_item 上的每个自定义 css 您还必须添加 css .webix_inp_static如图：

<style>
  .done .webix_inp_static,.webix_list_item.done { 
    background:#ddf7dd; 
  }
</style>

2。 onChange 函数

您必须 removeCss on the oldV if existing and addCss 在 newV 上：

onChange:function(newV, oldV){ 
         if(oldV) webix.html.removeCss(this.getNode(), this.getList().getItem(oldV).$css);   
         if(newV) webix.html.addCss(this.getNode(), this.getList().getItem(newV).$css);            
        }

请检查代码段 here。

改变 richselect 的输入颜色

Change richselect's input color

html

javascript

css

select

webix