Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. Добавить ссылки на файлы PP.css и PP.js.
2. Затем в теге <head> дополнительно установить стиль для элемента с идентификатором «TL»:
<style>
#TL {
border-color: #CCCCCC;
border-width: 0px;
border-style: solid;
width: 250px;
}
</style>
2. Внутри тега <body> разместить блок с идентификатором «TL» :
<div id="TL"></div>
3. Далее на страницу внутри тега <body> необходимо добавить сценарий, который создаёт текстовые поля:
<script type = "text/javascript">
// Создаем компонент текстового поля
var textArea1 = new PP.Ui.TextArea({
ParentNode: 'TL', // Идентификатор родительского контейнера
Content: 'Текстовая область 1' // Текст компонента
});
// Создаем компонент текстового поля
var textArea2 = new PP.Ui.TextArea({
ParentNode: 'TL', // Идентификатор родительского контейнера
Content: 'Текстовая область 2', // Текст компонента
ReadOnly: true // Запретим вводить текст в компонент
});
</script>
Для выполнения пользовательских сценариев над текстовыми полями, в том числе примеров, приведённых на страницах описания свойств, методов и событий данного компонента, требуется разместить код либо после указанного выше сценария, либо в консоли браузера.
4. В конце документа вставляем код, устанавливающий стили к вершине «document.body», соответствующие операционной системе клиента:
<script type="text/javascript"> PP.initOS(document.body); </script>
В результате выполнения примера на html-странице будет размещено два компонента PP.Ui.TextArea. В компоненте textArea1 доступен текстовый ввод, а в компоненте textArea2 - не доступен.
См. также: