在Dojo下拉列表值中包含图标

5ktev3wc 于 2022-12-16 发布在 Dojo

关注(0)|答案(3)|浏览(180)

我很少被拉进与dojo相关的工作中，以至于我对它的了解不够（我主要做perl工作）。
总之，简单的问题是，我有一个dojo.form.ComboBox，其中一些值需要有一个小图标放在他们旁边（他们是特殊变量），当你下拉。我不知道在dojo.form.ComboBox如果这是甚至可能的。
我是否使用了正确的控件？（声明一下，我使用Template：：Toolkit生成页面，而我的应用程序使用的是Dojo框架）。
我需要保持ComboBox的功能，即如果值不存在，则可以添加值。即使我不能使用图标，但某种突出显示行的方法也可以，或者如果选择了某个值，则可以更改框的颜色。
任何线索都将不胜感激简妮

dojo

来源：https://stackoverflow.com/questions/6268473/including-an-icon-in-dojo-drop-down-list-values

3条答案

按热度按时间

oprakyz71#

请考虑使用dijit.form.DropDownButton。此链接包含如何将图标添加到值的代码示例。
注意，DropDownButton使用dijit.MenuItem作为元素，因此您的目标是在这些菜单项上设置所需的图标。Dojo有几个图标类可供使用，但如果您想使用自己的自定义图标，请查看this。

赞(0）回复(0）举报 2022-12-16

14ifxucb2#

<!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>

出于存档的目的，如果其他人有这个问题，只需剪切和粘贴上面看到这一行动。你将不得不找到自己的图像的图标，当然，但这工程。珍妮

赞(0）回复(0）举报 2022-12-16

carvr3hs3#

设置参数的值：搜索属性=“名称”，标签属性=“标签”，标签类型=“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();
});

赞(0）回复(0）举报 2022-12-16

我来回答

在Dojo下拉列表值中包含图标

3条答案

相关问题

热门标签

最新问答