To execute the example, create an HTML page and perform the following operations:
1. Add a link to PP.css and PP.js files.
2. Next in the <head> tag set style for the element with the ID "TL":
<style> #TL { border-color: #CCCCCC; border-width: 0px; border-style: solid; width: 300px; } </style>
3. Inside the <body> tag place the block with the ID "TL" :
<div id="TL"></div>
4. Add an image named bc-close.png stored at the path build/Img.
5. Next add a script that creates text entry box within the <body> tag:
<script type="text/javascript"> // Create a text box component var textBox = new PP.Ui.TextBox({ ParentNode: "TL", // Parent container identifier EnableEdit: false, // Deny editing ImageAlign: PP.LTRB.Left, // Background image position ImageUrl: "build/Img/bc-close.png", // Image URL ImageWidth: 10, // Image width IsWatermark: true, // Indicates whether transparent text is rendered if component field is empty and inactive MaxLength: 24, // Maximum text length in component WatermarkText: "Text box" // Transparent text value if component field is empty or inactive }); </script>
After the example execution the PP.Ui.TextBox component is placed on the HTML page:
See also: