Для выполнения примера подключите библиотеку компонентов PP.js и таблицы визуальных стилей PP.css. Далее приведен javascript-код, при помощи которого создается компонент TabControl.
//создаем компонент TabControl
var tabcontrol= new PP.Ui.TabControl({
Id: "TabControl1",
ParentNode: document.getElementById("sample"),
//запрещаем перетаскивать вкладки
DragDropEnabled: false,
//путь к папке с картинками
ImagePath: "build/img/",
Width: 500,
Height: 40,
//массив вкладок
Items: [{
//заголовок вкладки
Caption: "Edit",
//путь до картинки, которая будет отображаться в заголовке вкладки
ImageUrl: "build/img/navigator/ribbon/edit.png",
//позиция вкладки
Position: PP.LTRB.Top
}, {
Caption: "Marking",
Position: PP.LTRB.Top
}, {
Caption: "View",
Position: PP.LTRB.Top
}, {
Caption: "Border",
Position: PP.LTRB.Top
}, {
Caption: "Fill",
Position: PP.LTRB.Top
}]
});
//добавляем вкладку
tabcontrol.addItem({
Caption: "Protection",
Position: PP.LTRB.Top
});
После выполнения примера на html-странице будет размещен компонент TabControl, имеющий следующий вид:
См. также: