如何禁用“dijit/form/Select”中选项的焦点？

Question

我需要更改小部件的行为 dijit/form/Select。

小部件不应允许焦点（通过鼠标或使用键盘）具有属性 disabled: true.

的选项

我想知道你能否指出我如何实现这个结果。

require([
  'dijit/form/Select',
  'dojo/_base/window',
  'dojo/domReady!'
], function(Select, win) {
  var select = new Select({
    name: 'select2',
    options: [{
        label: '<i>Swedish Cars</i>',
        value: '',
        disabled: true
      },
      {
        label: 'Volvo',
        value: 'volvo'
      },
      {
        label: 'Saab',
        value: 'saab',
        selected: true
      },
      {
        label: '<i>German Cars</i>',
        value: '',
        disabled: true
      },
      {
        label: 'Mercedes',
        value: 'mercedes'
      },
      {
        label: 'Audi',
        value: 'audi'
      }
    ]
  }, 'select');

  select.on('change', function(evt) {
    console.log('myselect_event');
  });
});

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />

<script>
  window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script>


<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<body class="claro">
  <div id="select"></div>
</body>

Answer 1

我使用猴子补丁解决了这个问题。

解决方案包括：

在标签中添加标记以便我们可以自定义外观。
在项目选项中添加属性 disabled:true，因此项目不会触发 onChange。
使用鼠标和键盘时禁用对组项目的关注。

我仍然很想知道是否存在其他 better/cleaner 解决方案。

  require([
    'dijit/form/Select',
    'dojo/_base/window',
    'dojo/domReady!'
  ], function(Select, win) {
    var select = new Select({
      name: 'select2',
      options: [{
        label: '<i>Swedish Cars</i>',
        value: '',
        group: true,
        disabled: true
      }, {
        label: 'Volvo',
        value: 'volvo'
      }, {
        label: 'Saab',
        value: 'saab',
        selected: true
      }, {
        label: '<i>German Cars</i>',
        value: '',
        group: true,
        disabled: true
      }, {
        label: 'Mercedes',
        value: 'mercedes'
      }, {
        label: 'Audi',
        value: 'audi'
      }]
    }, 'select');

    select.on('change', function(value) {
      alert(value);
    });

    select.dropDown._onUpArrow = function() {
      this.dropDown.focusPrev()
    }.bind(select);

    select.dropDown._onDownArrow = function() {
      this.dropDown.focusNext()
    }.bind(select);


    select.dropDown.focusNext = function() {
      var next = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, 1);
      var nextSuccessive;
      var nextFinal;
      if (next.option.group) {
        var next = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, 1);
        this.dropDown.focusChild(next);
        nextSuccessive = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, 1);
        nextFinal = nextSuccessive;
      } else {
        nextFinal = next;
      }
      this.dropDown.focusChild(nextFinal);
    }.bind(select);

    select.dropDown.focusPrev = function() {
      var prev = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, -1);
      var prevSuccessive;
      var prevFinal;
      if (prev.option.group) {
        var prev = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, -1);
        this.dropDown.focusChild(prev);
        prevSuccessive = this.dropDown._getNextFocusableChild(this.dropDown.focusedChild, -1);
        prevFinal = prevSuccessive;
      } else {
        prevFinal = prev;
      }
      this.dropDown.focusChild(prevFinal, true);
    }.bind(select);

    select.dropDown.onItemHover = function( /*MenuItem*/ item) {
      if (item.option.group) {
        item._set("hovering", false);
        console.log('skip hover');
        return;
      }

      if (this.activated) {
        this.set("selected", item);
        if (item.popup && !item.disabled && !this.hover_timer) {
          this.hover_timer = this.defer(function() {
            this._openItemPopup(item);
          }, this.popupDelay);
        }
      } else if (this.passivePopupDelay < Infinity) {
        if (this.passive_hover_timer) {
          this.passive_hover_timer.remove();
        }
        this.passive_hover_timer = this.defer(function() {
          this.onItemClick(item, {
            type: "click"
          });
        }, this.passivePopupDelay);
      }

      this._hoveredChild = item;

      item._set("hovering", true);
    }.bind(select.dropDown);

    select.dropDown._onItemFocus = function( /*MenuItem*/ item) {
      if (item.option.group) {
        return;
      }
      if (this._hoveredChild && this._hoveredChild != item) {
        this.onItemUnhover(this._hoveredChild);
      }
      this.set("selected", item);
    }.bind(select.dropDown);
  });

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />

<script>
  window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script>


<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<body class="claro">
  <div id="select"></div>
</body>

如何禁用“dijit/form/Select”中选项的焦点？

How to disable focus for an option in `dijit/form/Select`?

javascript

dojo

dijit.form