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: