Включение иконки в значения выпадающего списка Dojo - PullRequest
Новая
       29

Включение иконки в значения выпадающего списка Dojo

0 голосов
/ 07 июня 2011

Меня так редко втягивают в работу, связанную с додзё, что я не знаю её так хорошо, как должен (я в основном работаю на perl).

В любом случае, короткий вопрос, что у меня додзё.form.ComboBox, где некоторые значения должны иметь маленький значок рядом с ними (они являются специальными переменными), когда вы выпадаете.Я не уверен в dojo.form.ComboBox, если это вообще возможно.

Я даже использую правильный элемент управления? (Для записи я создаю свои страницы с помощью Template :: Toolkit, и мое приложение находится вкаркас dojo).

Мне нужно сохранить функциональность ComboBox, чтобы можно было добавлять значения, если они еще не существуют. Даже если я не могу использовать значок, какой-то способ выделения строки будет в порядке.тоже или изменение цвета поля, если выбрано определенное значение, будет работать.

Любые подсказки будут оценены. Janie

Ответы [ 3 ]

1 голос
/ 15 июня 2011 
<!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>

Для целей архивирования, если у кого-то еще возникла эта проблема, просто скопируйте и вставьте вышеперечисленное, чтобы увидеть это в действии. Вы должны будете найти свои собственные изображения для значков, конечно, но это работает. Джени

1 голос
/ 07 июня 2011

Рассмотрите возможность использования dijit.form.DropDownButton . Ссылка содержит примеры с кодом того, как добавить значки к значениям.

Обратите внимание, что DropDownButton использует dijit.MenuItem в качестве элементов, поэтому ваша цель - установить нужные значки в этих пунктах меню. В Dojo есть несколько готовых к использованию классов значков, но если вы хотите использовать собственные значки, взгляните на this .

0 голосов
/ 29 января 2018

Установите значения параметров: searchAttr = 'name' , labelAttr = 'label' , 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();
});
...