To execute the example, connect the PP.js components library and the PP.css visual styles table. Further the Javascript code with the help of which the input box with the scroll bars buttons will be located on the HTML page is given:
<script type="text/javascript">
var SE = new PP.Ui.SpinEdit({
ParentNode: document.getElementById("SE1"),//Create the SpinEdit component
Width: 100,
SpinUp: spinUp,//Add the SpinUp event handler.
SpinDown: spinDown,//Add the SpinDown event handler.
BeforeChange: OnBeforeChange,//Add a handler for the BeforeChange event.
AfterChange: OnAfterChange});//Add a handler for the AfterChange event.
SE.setFocus();//Set focus for the component.
function spinUp(sender, args)//SpinUp event handler.
{
var i = parseInt(SE.getContent());
if (!isNaN(i))
{
i += 10;
SE.setContent(i.toString())
}
args.IsSpinUp = true;
}
function spinDown(sender, args)//The SpinDown event handler.
{
var i = parseInt(SE.getContent());
if (!isNaN(i))
{
i += -10;
SE.setContent(i.toString())
}
args.IsSpinUp = false;
}
function OnAfterChange(sender, args)//The AfterChange event handler.
{
var i = parseInt(args.NewValue);
if (!isNaN(i) && i.toString() == args.NewValue)
{
if (i > 1000 || i < -1000)
SE._applyNotValidCSS();//Show indicator of incorrect value on entering a //numeric value greater or less than 1000.
else
SE._applyValidCSS();
}
else
SE._applyNotValidCSS();//Show indicator of incorrect value on entering //a non-numeric value.
}
function OnBeforeChange(sender, args)//The BeforeChange event handler.
{
if (args.NewValue == "100")
args.Cancel = true;
}
</script>
After executing the example the input box with with scroll bar buttons are located on the HTML page.
The cursor is placed in the input box - it is a result of the SpinEdit.setFocusmethod use.
Input number to the input box. On pressing the scroll bar buttons or the Up/Down keys then the value in the input box increases/decreases by ten (the result of executing the spinDown and spinUp functions).
On entering a text value or a numeric value greater than or smaller than 1,000, an indicator of invalid input appears in the screen (result of executing the OnAfterChange function).
The value 100 cannot be inputed in the created component (result of executing the OnBeforeChange function).
See also: