Пример создания компонента Breadcrumb

Для выполнения примера в теге HEAD добавьте ссылки на библиотеки PP.js, и визуальный стиль PP.css. В теге BODY добавьте элемент DIV с идентификатором «bc1». Предполагается наличие в корневой папке проекта папки с изображениями «img» и папки с ресурсами «resources». Создадим компонент Breadcrumb, в состав которого входят три элемента.

    //определяем папку с ресурсами
    PP.resourceManager.setRootResourcesFolder("resources/");
    var bread = new PP.Ui.Breadcrumb(
    {
        ParentNode: document.getElementById("bc1"),
        Width: 400,
        ImagePath: "img/",
        Items: [
        {
            Content: "Element1",
            Id: "el1"
        },
        {
            Content: "Element2",
            Id: "el2"
        },
        {
            Content: "Element3",
            Id: "el3"
        }],
        SelectedItems: [0, 1]
    });
    bread.getSelectedItems().remove(1);

После выполнения примера на html-странице будет создан компонент Breadcrumb, имеющий следующий вид:

При нажатии на кнопку из цепочки навигации будет удален выбранный элемент.

При нажатии на кнопку будет раскрыто меню для выбора элементов:

При нажатии на кнопку будет раскрыта история выбора элементов:

В цепочке навигации можно установить элементы из истории выбора.

См. также:

DHTML-компоненты