Including an icon in dojo drop down list values
I so rarely ever get pulled into dojo related work that I don't know it as well as I should (I mostly do perl work).
Anyway, the short question is that I have a dojo.form.ComboBox where some of the values need to have a small icon placed next to them (they are special variables) when you dropdown. I"m not sure in dojo.form.ComboBox if this is even possible.
Am I even using the right control? (For the record I am generating my pages with Template::Toolkit and my app is in dojo's framework).
I need to keep the ComboBox functionality of being able to add values if they don't already exist. Even if I can't use an icon, some way of highlighting the line would be fine too or changing the color of开发者_Go百科 the box if a certain value is selected would work.
Any clues would be appreciated. Janie
Consider using a dijit.form.DropDownButton. The link contains examples with code on how to add icons to the values.
Notice that the DropDownButton uses dijit.MenuItem's as elements, as such your goal is to set the icons you want on these menu items. Dojo has several icon classes ready for use, but if you want to use your own custom icons, take a look at this.
<!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>
For archival purposes should someone else have this problem, just cut and paste the above to see this in action. You will have to find your own images for the icons of course but this works. Janie
Set the values of the parameters: searchAttr='name', labelAttr='label', labelType='html'.
searchAttr - the value of the parameter that is displayed when it is selected. labelAttr - here place html. The value of this parameter is displayed in the dropdown menu.
e.g.
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();
});
加载中,请稍侯......
精彩评论