Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. Добавить ссылку на файлы PP.css и PP.js.
2. Затем в теге <head> дополнительно установить стиль для элемента с идентификатором «TL»:
<style>
#TL {
border-color: #CCCCCC;
border-width: 0px;
border-style: solid;
width: 300px;
}
</style>
3. Внутри тега <body> разместить блок с идентификатором «TL» :
<div id="TL"></div>
4. Необходимо добавить картинку с названием bc-close.png по адресу build/Img.
5. Далее на страницу внутри тега <body> необходимо добавить сценарий, который создаёт поле текстового ввода:
<script type="text/javascript">
// Создаем компонент текстового поля
var textBox = new PP.Ui.TextBox({
ParentNode: "TL", // Идентификатор родительского контейнера
EnableEdit: false, // Запретим возможность редактирования
ImageAlign: PP.LTRB.Left, // Положение фоновой картинки
ImageUrl: "build/Img/bc-close.png", // Ссылка на картинку
ImageWidth: 10, // Ширина картинки
IsWatermark: true, // Признак отрисовки прозрачного текста, если поле компонента пустое и неактивно
MaxLength: 24, // Максимальная длина текста в компоненте
WatermarkText: "Текстовое поле" // Значение прозрачного текста, если поле компонента пустое и неактивно
});
</script>
В результате выполнения примера на html-странице будет размещен компонент PP.Ui.TextBox:
См. также: