Question

我几乎没有被吸引到dojo相关的工作，我不知道它应该（我主要做perl工作）。

无论如何，简短的问题是我有一个dojo.form.ComboBox，其中一些值需要在下拉列表旁边放置一个小图标（它们是特殊变量）。如果可能的话，我在dojo.form.ComboBox中不确定。

我甚至使用正确的控件吗？（对于记录，我使用Template :: Toolkit生成我的页面，我的应用程序在dojo的框架中）。

我需要保持ComboBox功能，如果它们尚不存在，则能够添加它们。即使我不能使用图标，突出显示该行的某种方式也会很好，或者如果选择某个值就会改变该框的颜色。

任何线索都会受到赞赏。珍妮

Answer 1

考虑使用dijit.form.DropDownButton。该链接包含示例，其中包含有关如何向值添加图标的代码。

请注意，DropDownButton使用dijit.MenuItem作为元素，因此您的目标是在这些菜单项上设置所需的图标。 Dojo有几个图标类可供使用，但如果您想使用自己的自定义图标，请查看this。

Answer 2

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

出于存档目的，如果其他人遇到此问题，只需剪切并粘贴以上内容即可查看此操作。当然，你必须为图标找到自己的图像，但这是有效的。珍妮

Answer 3

设置参数的值： searchAttr =＆＃39;名称＆＃39; ， labelAttr =＆＃39;标签＆＃39; ， labelType =＆＃39; html＆＃39; < /强>

searchAttr - 选中时显示的参数值。 labelAttr - 这里放置html。此参数的值显示在下拉菜单中。

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(); });

在dojo下拉列表值中包含一个图标

3 个答案: