【问题标题】:Style dijit.form.Select drop down menu样式 dijit.form.Select 下拉菜单
【发布时间】:2013-10-11 00:43:31
【问题描述】:

如果使用 HTML 标记,我如何设置dijit.form.Select 下拉菜单 的样式。

<select id="sourceselect"   dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>

为了清楚起见,它希望为填充内容的下拉菜单设置样式。我想更改该菜单的高度,如果超出高度,我想有一个滚动条。

我使用的是 Dojo 1.6 版。这是一个 Fiddle 示例:http://jsfiddle.net/NH7dd/

编辑:为什么会有缺点?

【问题讨论】:

    标签: forms select dojo


    【解决方案1】:

    Dojo 生成的菜单被放置在 DOM 节点的根目录中。菜单以某种方式相对于文本字段定位是一个常见的错误,但事实并非如此。

    如果你想改变菜单的样式,那么你可以使用下面的 CSS 选择器:

    div[dijitpopupparent="sourceselect"] > .dijitMenu {
        /** Your CSS */
    }
    

    之所以有效,是因为菜单包含在dijit/popup 中。此弹出窗口允许显示/隐藏菜单,您可以看到它有一个属性 dijitpopupparent,它具有字段的原始 ID。

    我还更新了您的 JSFiddle,现在看起来像 this。但我真的不建议像这样更改菜单的行为,因为您可能会弄乱组合框的原始功能/行为。我的意思是,现在我在获取某些值时遇到问题,因为一个“滚动刻度”已经传递了一个值。使用更新后的样式,我什至无法正确选择“2”了。


    编辑:在更新的 JSFiddle 中,滚动条将始终可见,如果您希望滚动条仅在有更多选项时出现,请将 overflow-y: scroll 更改为 overflow-y: auto

    【讨论】:

      【解决方案2】:

      您可以设置maxHeight的属性。

      <select id="sourceselect"   
      dojoType="dijit.form.Select"
      data-dojo-props="maxHeight: 200" 
      style='width:200px' 
      onChange="changeDetected();">
      </select>
      

      此外,dojo 的新语法是“data-dojo-type”而不是“dojoType”。

      这里是显示 maxHeight 属性的 JSFiddle。 (我使用 dojo 1.9,但 maxHeight 在 1.6 中可用) http://jsfiddle.net/NH7dd/17/

      【讨论】:

      • maxHeight 的参数应该是一个整数。我已经编辑了我的答案。你的小提琴不工作的原因是你没有正确加载道场。小提琴上的选择只是常规选择,而不是道场选择。
      猜你喜欢
      • 2016-05-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多