Для выполнения примера в теге HEAD добавьте ссылки на файлы:
библиотека базовых компонентов PP.js;
визуальные стили PP.css.
В теге SCRIPT добавьте скрипт для создания компонента NumberEdit:
<script text="text/javascript">
function Ready() {
NE = new PP.Ui.NumberEdit({//Создаем экземпляр компонента NumberEdit
ParentNode: document.getElementById("NE1"),//Идентификатор, который содержится в теге div
Width: "250px",
Height: "50px",
Step: 10,//Шаг изменения значения
EnableGroupSeparator: true,// Разделение по разрядам
DecimalSeparator: ".",//Разделитель разрядов
GroupSeparator: ",",//Разделитель тысяч
MinValue: 0,//Минимальное значение
MaxValue: 10000,//Максимальное значение
FractionCount: 2,//Количество знаков после разделителя разрядов
Walkthrough: true,//Цикличность установлена
IsNullable: true //Отображение пустого поля ввода
});
NE.setFocus();//Устанавливаем фокус компоненту
};
</script>
В теге BODY должен содержаться элемент DIV с идентификатором «NE1»:
<body onload="Ready()"> <div id="NE1"></div> </body>
После выполнения примера на html-странице будет размещен числовой редактор, имеющий следующий вид:
При нажатии на клавиши UP/DOWN или кнопки прокрутки значение будет изменяться на 10 (свойство Step).
В окне редактора может быть установлено значение от 0 до 10000. При вводе недопустимого значения загорается индикатор некорректного ввода.
Если введено минимальное значение, при нажатии нижней кнопки прокрутки или клавиши DOWN в окне редактора будет установлено максимальное значение, которое при дальнейшей прокрутке вниз будет уменьшаться на 10. Это обусловлено тем, что для свойства Walkthrough установлено значение true.
См. также: