如何设置编程dijit.form.select的下拉菜单 [英] How to style the drop down menu of a programmatic dijit.form.select

问题描述

我的问题类似于此

区别在于我的 dijit.form.Select id >。 id是由dojo本身分配的。

编辑：我可以添加自定义类到 dijit.form.Select

我可以找出的一种方法是使用类似：

  div [dijitpopupparent ^ =dijit_form_Select]> .dijitMenu {
 ... 
} 
  

为CSS。但它会将CSS应用于整个应用程序中所有不需要的 dijit.form.Select 元素。

解决方案

您已经提到可以向 dijit.form.Select 添加一个特定的类，例如add ex c $ c> .myClass （稍后将使用它）
然后创建将应用于div弹出窗口的特定css

CSS

  .stylePopup {
 max-height：25px; 
 overflow-y：scroll！important; 
 border：1px solid＃f00; 
 / *其他样式tuff ... * / 
} 
  

你将把这个类添加到 dijit.form.Select 的弹出式div中，该类的程序化方式是
，通过循环遍历所有的dijit， dijit有一个 myClass 类，然后附加到它的弹出div stylePopup class
在Dojo AMD风格1.7 +）

  require（[
dojo / ready，
dijit / registry，
dojo / dom，
dojo / _base / array，
dojo / dom-class
] ，
注册表，
 dom，
数组，
 domClass 
）{
 
 ready（function（）{
 var selectDijitClass =myClass; 
 var classToApply =stylePopup; 
 
 array.forEach（registry.toArray（），function（widget）{
 console.log（widget）; 
 if（widget.declaredClass ===dijit.form.Select&& widget.class === selectDijitClass）{
 console.log（registry.byId（widget.id +_ menu ）.domNode.parentNode）; 
 widget.on（click，function（e）{
 e.preventDefault（）; 
 if（dom.byId（this.id +_ dropdown））{
 if（！domClass.contains（dom.byId（this.id +_ dropdown），classToApply））
 domClass.add（dom.byId（this.id +_ dropdown），classToApply）; 
} 
 
}）; 
} 
}）; 
 
}）; 
}）; 
  

这里是小提琴

My problem is similar to this

The difference is that there is no id in my dijit.form.Select. The id is the one assigned by dojo itself. So how do I achieve the result as in the linked question?

Edit: I can add custom class to the dijit.form.Select

One method that I could figure out was to use something like :

div[dijitpopupparent ^= "dijit_form_Select"] > .dijitMenu{
   ...
}

which will work like a regex for the CSS. But it will apply the CSS to all the dijit.form.Select elements in the entire application which I do not want.

解决方案

You've mentioned that you can add a specific class to your dijit.form.Select , by exemple add .myClass (we're going to use it later) then create the specific css which will be applied to the div popup

CSS

.stylePopup {
    max-height: 25px;
    overflow-y: scroll !important;
    border:1px solid #f00;
    /* other styles tuff ... */
}

then you you'll add this class to the popup div of the dijit.form.Select whose have the above class programmaticly , by looping over all the dijits than if a dijit have a "myClass" class then append to it's popup div the stylePopup class (the code is in Dojo AMD style 1.7+)

require([
    "dojo/ready",
    "dijit/registry",
    "dojo/dom",
    "dojo/_base/array",
    "dojo/dom-class"
], function(
    ready,
    registry,
    dom,
    array,
    domClass
) {

ready(function() {
  var selectDijitClass = "myClass";
  var classToApply = "stylePopup";

  array.forEach(registry.toArray(),function(widget){
    console.log(widget);
    if(widget.declaredClass === "dijit.form.Select" && widget.class === selectDijitClass){
      console.log(registry.byId(widget.id+"_menu").domNode.parentNode);
      widget.on("click",function(e){
        e.preventDefault();
        if(dom.byId(this.id+"_dropdown")){
            if(!domClass.contains(dom.byId(this.id+"_dropdown"), classToApply))
                domClass.add(dom.byId(this.id+"_dropdown"),classToApply);
        }

      });
    }
  });

});  
});

Here is a Fiddle

这篇关于如何设置编程dijit.form.select的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！