2017-06-06 24 views
0

ウィジェットの動作を変更する必要がありますdijit/form/Select`dijit/form/Select`でオプションのフォーカスを無効にするには?

ウィジェットは、プロパティーがのオプションにフォーカス(マウスまたはキーボードを使用)を許可しないでください。

この結果をどのように達成するかを教えてください。

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>

+1

私はあなたがこのように意味ですか、これは前に行って見て覚えていますか? http://jsfiddle.net/Q4zw6/ – erotavlas

+0

@erotavlasあなたのリンクのおかげで、興味深い現在、私は一時的なソリューションを見ているathttps://jsfiddle.net/gibbok/u3ux0uxk/ dijit.form.FilteringSelect – GibboK

答えて

0

私は猿のパッチを使用してこの問題を解決することができました。我々は外観をカスタマイズすることができるようにラベルでマークアップを追加

  • ソリューションに構成されています。

  • プロパティを無効にする:アイテムオプションでtrueを指定すると、アイテムは起動しませんonChange
  • マウスとキーボードを使用しているときにグループ項目にフォーカスを無効にします。

もう1つのより良い/よりクリーンなソリューションが存在するかどうかは、まだ非常に興味深いです。

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>

関連する問題