Add links to the following files in the HEAD tag to execute the example:
Library of the PP.js basic components.
PP.css visual styles.
Add the script to create the NumberEdit component in the SCRIPT tag:
<script text="text/javascript">
function Ready() {
NE = new PP.Ui.NumberEdit({//Create an instance of the NumberEdit component
ParentNode: document.getElementById("NE1"),//Identifier contained in the div tag
Width: "250px",
Height: "50px",
Step: 10,//Value change step
EnableGroupSeparator: true,// Separation by groups
DecimalSeparator: ".",//Decimal separator
GroupSeparator: ",",//Thousands separator
MinValue: 0,//Minimum value
MaxValue: 10000,//Maximum value
FractionCount: 2,//Number of digits after decimal separator
Walkthrough: true,//Recurrence is determined
IsNullable: true //Display empty input field
});
NE.setFocus();//Set component focus
};
</script>
The BODY tag must contain a DIV element with the NE1 identifier.
<body onload="Ready()"> <div id="NE1"></div> </body>
After executing the example the HTML page will contain a value editor that looks as follows:
On clicking the UP or DOWN keys or scroll button the property changes by 10 (the Step property).
A value between 0 and 10000 can be set in the editor box. If an invalid value is entered, an indicator of incorrect input signals it.
If the minimum value is set, on clicking the bottom scroll button or the DOWN key, maximum value is set in the editor box, and further scrolling downwards decreases the value by ten. This happens because the Walkthrough property is set to true.
See also: