Для выполнения примера в теге HEAD html-страницы добавьте ссылки на следующие js и css-файлы:
PP.js;
PP.Metabase.js;
PP.Navigator.css;
PP.Navigator.js;
файл с ресурсами (например, resources.ru);
PP.css.
В теге SCRIPT добавьте следующий скрипт:
function onLoad()
{
PP.resourceManager.setRootResourcesFolder("Scripts/resources/");
PP.setCurrentCulture(PP.Cultures.ru);
mb = new PP.Mb.Metabase(
{
ExportUrl: "PPService.axd?action=export",
ImportUrl: "PPService.axd?action=import",
PPServiceUrl: "PPService.axd?action=proxy",
Id: "WAREHOUSE",
UserCreds: {
UserName: "user",
Password: "password"
}
});
mb.open();
ribbon = new PP.Mb.Ui.NavigatorRibbon(
{
//путь к папке с картинками
ImagePath: "PP_img/navigator/ribbon/",
ParentNode: document.body,
//при выборе пункта «Выход» главного меню «Навигатор»
Exited: function ()
{
console.log("Exited")
},
});
//возвращаем все элементы управления на вкладке «Открыть»
controls = ribbon.getControl().getItems()[0].getPanels()[4].getControls();
//делаем активными все элементы управления на вкладке «Буфер обмена»
for (var i = 0; i < controls.length; i++)
{
controls[i].setEnabled(true)
}
//кнопка «Дерево объектов» не нажата
ribbon.setShowNavigationPanel(false);
//Нажата кнопка «Обычные значки»
ribbon.setObjectListMode("Large");
//Кнопка «Вставить» активна
ribbon.setPasteButtonEnabled(true);
//ribbon.setViewEditButtonsStateByClass(true)
//добавляем на ленту новую панель:
ribbon.getControl().getItems()[0].addPanel(new PP.Ui.RibbonPanel(
{
Caption: "Новая панель",
Id: "myPanel"
}))
//добавляем кнопку на новую панель
ribbon.getControlById("myPanel").addControl(new PP.Ui.RibbonButton(
{
Content: "Новая кнопка",
Id: "myButton"
}))
// Обновим компонент
ribbon.refresh();
}
В теге BODY добавляем атрибут onload:
<body onload="onLoad();">
</body>
После выполнения примера на html-странице будет размещен компонент NavigatorRibbon, имеющий следующий вид:

При нажатии на кнопки ленты в консоли браузера будут появляться сообщения с названиями событий, которые генерируются при нажатии на элемент управления. На вкладку «Главная» добавлены новая панель и новая кнопка.
См. также: