richselectの入力色を変更する

Question

実行時に入力の色を変更することができるのだろうかと思います。

ここに私の選択（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キーが。

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

richselectの値を変更した後、私はrichselectの背景色として新たに選択された項目の背景色を設定する必要があります。

私の意見では、これはonChangeイベントで行うことができますが、どのように正確に解決できるかはわかりません。

提案がありますか？前もって感謝します。ここで

Answer 1

答えに@Nikhilを教えていただきありがとうございました。私のコンボロジックをwebixの方法でrichselectに適用するのに役立ちました。

ので、違いがコンボではなく、私はに適用する必要があり、私は入力にスタイルを適用して、それが働いていたが、入力が間違っていた上richselectのスタイルを適用するということでした.webix_inp_static。 webix_list_item上のカスタムCSSのそれぞれについて、あなたのスタイルで

1. CSS

あなたものCSSを追加する必要があります。webix_inp_static示すように：あなたはoldVにremoveCssに持って

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

2のonChange機能

既存およびなどnewVにaddCss場合：

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。

Answer 2

はあなたのソリューションです：

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

1）まず、動的要素のクラス名）は、その要素

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

2をフェッチするためにクリックを取得次に、ちょうど取得その要素の計算された背景色を決定し、それを「新たに選択された」要素に設定する。

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

私はこれを1行書きましたが、変数を作成してより多くの文に分けることができます。 -

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

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

私はこれらの2つを1行で（上記）とする方が好きです。

だからあなたの最終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文を避けることができます。