更多選擇FilteringSelect

如何更改過濾選擇中的「更多選擇」標籤。請幫助我解決問題。以下是我試過的代碼，這是FilteringSelect中使用的正常代碼示例我在記事本++中執行了此操作。更多選擇FilteringSelect

<html> 
<head> 
<link rel="stylesheet" href="dijit/themes/claro/claro.css"> 
<script>dojoConfig = {parseOnLoad: true}</script> 
    <script src='dojo/dojo.js'></script> 
    <script> 
require([ 
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!" 
], function(Memory, FilteringSelect){ 
    var stateStore = new Memory({ 
     data: [ 
      {name:"Alabama", id:"AL"}, 
      {name:"Alaska", id:"AK"}, 
      {name:"American Samoa", id:"AS"}, 
      {name:"Arizona", id:"AZ"}, 
      {name:"Arkansas", id:"AR"}, 
      {name:"Armed Forces Europe", id:"AE"}, 
      {name:"Armed Forces Pacific", id:"AP"}, 
      {name:"Armed Forces the Americas", id:"AA"}, 
      {name:"Alifornia", id:"AA"}, 
      {name:"Aolorado", id:"AO"}, 
      {name:"Aonnecticut", id:"AT"}, 
      {name:"Aelaware", id:"AE"}, 
      {name:"Blabama", id:"BL"}, 
      {name:"Blaska", id:"BK"}, 
      {name:"Bmerican Samoa", id:"BS"}, 
      {name:"Brizona", id:"BZ"}, 
      {name:"Brkansas", id:"BR"}, 
      {name:"Brmed Forces Europe", id:"BE"}, 
      {name:"Brmed Forces Pacific", id:"BP"}, 
      {name:"Brmed Forces the Americas", id:"BA"}, 
      {name:"Balifornia", id:"BA"}, 
      {name:"Bolorado", id:"BO"}, 
      {name:"Bonnecticut", id:"BT"}, 
      {name:"Belaware", id:"BE"}, 
      {name:"Dlabama", id:"DL"}, 
      {name:"Dlaska", id:"DK"}, 
      {name:"Dmerican Samoa", id:"DS"}, 
      {name:"Drizona", id:"DZ"}, 
      {name:"Drkansas", id:"DR"}, 
      {name:"Drmed Forces Europe", id:"DE"}, 
      {name:"Drmed Forces Pacific", id:"DP"}, 
      {name:"Drmed Forces the Americas", id:"DA"}, 
      {name:"Dalifornia", id:"DA"}, 
      {name:"Dolorado", id:"DO"}, 
      {name:"Dnecticut", id:"DT"}, 
      {name:"Delaware", id:"DE"} 
     ] 
    }); 

    var filteringSelect = new FilteringSelect({ 
     id: "stateSelect", 
     name: "state", 
     value: "CA", 
     store: stateStore, 
     forceWidth:true, 
     pageSize:10, 
     searchAttr: "name" 
    }, "stateSelect"); 
}); 
    </script> 
    <style type="text/css"> 
    .dijitInputField 
    { 
     font-size:13; 
    } 
    .dijitPlaceHolder 
    { 
     font-size:13; 
    } 
    .dijitMenuItem 
    { 
     font-size:0.8em; 
    } 

</style> 
</head> 
<body class="claro"> 
    <input id="stateSelect"> 
<p> 
    <button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button> 
    <button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button> 
</p> 
</body> 
</html>

來源

2013-12-12 user3094600

「更多選擇」將出現在下拉菜單的末尾 – user3094600

是的，它是可能的，但是這並不容易。 Dojo在他們本地化的消息中定義了「更多選擇」消息，您可以看到這些消息爲here。

您不能直接更改它們，但可以覆蓋使用它的方法。這是一個棘手的部分，在閱讀代碼後，我發現使用dropDownClass屬性（默認爲_ComboBoxMenu）加載下拉列表。這個類就是實際使用的消息（實際上這是一個mixin），所以我們需要繼承這個類，並延長其行爲，例如：

var CustomizedMenu = declare([_ComboBoxMenu], { 
    buildRendering: function() { 
     this.inherited(arguments); 
     this.nextButton.innerHTML = "More states"; // New text 
    } 
});

正如你所看到的，我們改變的HTML內容nextButton到buildRendering方法中的其他內容。它在原來的位置，所以我們在之後替換它，這就是爲什麼我們首先使用this.inherited(arguments);，因爲這意味着超類功能首先被執行。

後來，我們只是改變選擇的dropDownClass，就像這樣：

var filteringSelect = new FilteringSelect({ 
    id: "stateSelect", 
    name: "state", 
    value: "CA", 
    dropDownClass: CustomizedMenu, // Just change it 
    store: stateStore, 
    forceWidth:true, 
    pageSize:10, 
    searchAttr: "name" 
}, "stateSelect");

你可以看到this JSFiddle完整的代碼示例。

來源

2013-12-12 15:44:17 g00glen00b

更多選擇FilteringSelect

回答

相關問題