Question

我的问题类似于this

不同之处在于id中没有dijit.form.Select。 id是由dojo本身分配的id。那么如何在链接问题中实现结果呢？

修改：我可以将自定义类添加到dijit.form.Select

我能想到的一种方法是使用类似的东西：

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

这将像CSS的正则表达式一样工作。但它会将CSS应用于整个应用程序中我不想要的所有dijit.form.Select元素。

Answer 1

您已经提到可以通过例如添加dijit.form.Select向.myClass添加特定的类（稍后我们将使用它）然后创建将应用于div弹出窗口的特定css

<强> CSS

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

然后你将这个类添加到dijit.form.Select的popup div中，它具有上述类编程，循环遍历所有dijits，而不是dijit有一个“myClass”类，然后将stylePopup类附加到它的弹出div上（代码采用Dojo AMD风格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);
        }

      });
    }
  });

});  
});

这是Fiddle

如何设置程序化dijit.form.select的下拉菜单的样式

1 个答案: