在dojo中包含一個圖標下拉列表中的值

我很少有人被拉進與dojo相關的工作中，我不知道它以及我應該（我主要做Perl工作）。在dojo中包含一個圖標下拉列表中的值

不管怎麼說，簡單的問題是，我有一個dojo.form.ComboBox，其中一些值需要有一個小圖標放在他們旁邊（他們是特殊變量），當你下拉。我不確定在dojo.form.ComboBox，如果這是甚至可能的。

我甚至使用正確的控制？（記錄我生成我的網頁與模板::工具包和我的應用程序在dojo的框架）

我需要保持ComboBox的功能，如果它們不存在就可以添加值。即使我不能使用圖標，某種突出顯示行的方式也可以，也可以更改框的顏色，如果某個值被選擇是可行的。

任何線索將不勝感激。珍妮

來源

2011-06-07 Jane WIlkie

考慮使用dijit.form.DropDownButton。該鏈接包含有關如何將圖標添加到值的代碼示例。

請注意，DropDownButton使用dijit.MenuItem作爲元素，因此您的目標是在這些菜單項上設置所需的圖標。 Dojo有幾個圖標類可供使用，但如果您想使用自己的自定義圖標，請參閱this。

來源

2011-06-07 18:06:28 faken

這是很好的建議。唯一的問題是我需要保持組合框的功能，如果它們不在列表中，就可以添加值。 :-( – 2011-06-07 18:25:30

看看ComboBox的測試;它們有一個帶有Rich Text的ComboBox的例子，它可能是你想要的，這個測試在以下目錄中：dijit/tests/form/test_ComboBox.html。你需要要有完整的Dojo源代碼來查看測試，請在http://download.dojotoolkit.org/release-1.6.1/dojo-release-1.6.1-src.zip下載它。 – faken 2011-06-07 18:41:54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head> 
    <style type="text/css"> 
     body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
    djConfig="parseOnLoad: true"> 
    </script> 
    <script> 
     dojo.require("dojo.data.ItemFileReadStore"); 
     dojo.require("dijit.form.ComboBox"); 

     var storeData = { 
      identifier: 'abbr', 
      label: 'name', 
      items: [{ 
       abbr: 'ec', 
       name: 'Ecuador', 
       capital: 'Quito', 
     label:"<img width='16px' height='16px' src='images/one.jpg'/>Ecuador" 
      }, 
      { 
       abbr: 'eg', 
       name: 'Egypt', 
       capital: 'Cairo', 
     label:"<img width='16px' height='16px' src='images/two.jpg'/>Egypt" 
      }, 
      { 
       abbr: 'sv', 
       name: 'El Salvador', 
       capital: 'San Salvador', 
     label:"<img width='16px' height='16px' src='images/three.jpg'/>El Salvador" 
      }, 
      { 
       abbr: 'gq', 
       name: 'Equatorial Guinea', 
       capital: 'Malabo', 
     label:"<img width='16px' height='16px' src='images/four.jpg'/>Equatorial Guinea" 
      }, 
      { 
       abbr: 'er', 
       name: 'Eritrea', 
       capital: 'Asmara', 
     label:"<img width='16px' height='16px' src='images/five.jpg'/>Eritrea" 
      }, 
      { 
       abbr: 'ee', 
       name: 'Estonia', 
       capital: 'Tallinn', 
     label:"<img width='16px' height='16px' src='images/six.jpg'/>Estonia" 
      }, 
      { 
       abbr: 'et', 
       name: 'Ethiopia', 
       capital: 'Addis Ababa', 
     label:"<img width='16px' height='16px' src='images/seven.jpg'/>Ethiopia" 
      }] 
     } 
    </script> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" 
    /> 
</head> 


<body class=" claro "> 
    <div dojoType="dojo.data.ItemFileReadStore" data="storeData" jsId="countryStore"> 
    </div> 
    <div dojoType="dijit.form.ComboBox" store="countryStore" labelAttr="label" labelType="html"> 
    </div> 
</body>

備案應別人有這個問題，只要剪切和粘貼上面看到這個動作。你將不得不爲自己的圖標找到自己的圖像，但這是有效的。珍妮

來源

2011-06-15 14:35:05

設置參數的值： searchAttr = '名'，labelAttr = '標籤'，labelType = 'HTML'。

searchAttr - 選擇時顯示的參數值。 labelAttr - 這裏放置html。該參數的值顯示在下拉菜單中。

例如

require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function(Memory, ComboBox){ 
    var iconsStore = new Memory({ 
     data: [ 
      {id: 'stack-overflow', name: 'stack-overflow',  label: '<i class="fa fa-stack-overflow"/>'}, 
      {id: 'user',   name: 'user',    label: '<i class="fa fa-user"/>'}, 
      {id: 'group',   name: 'group',    label: '<i class="fa fa-groupr"/>'} 
     ] 
    }); 

    var cb_icons = new ComboBox({ 
     id: "iconSelect", 
     name: "isons", 
     value: "stack-overflow", 
     store: iconsStore, 
     searchAttr: "name", 
     labelAttr: "label", 
     labelType: "html" 
    }, "stateSelect").startup(); 
});

來源

2018-01-29 12:06:31

在dojo中包含一個圖標下拉列表中的值

回答

相關問題