Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. Добавить ссылку на файл стилей PP.css и файлы сценариев PP.js, jquery.js, PP.GraphicsBase.js, PP.Charts.js.
2. Далее в теге <head> необходимо добавить сценарий, создающий временную шкалу:
<script type="text/javascript">
var timeline;
$().ready(function () {
// Создадим временную шкалу
timeline = new PP.Ui.Timeline({
// Текущий шаг должен иметь индекс 1
CurrentStep: 1,
ImagePath: "build/img/", // Путь к папке со значками
// Наименования шагов шкалы
StepsNames: ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010"],
// Видимые шаги анимации
StepsVisibility: [true, true, true, true, true, true, true, true, false, false, false],
// Длительность шагов шкалы
StepDuration: 500,
// Длительность задержки
DelayDuration: 100,
// Запретим возвращение шкалы в начальное состояние
ReturnToInitialState: false,
// Текущий шаг временной шкалы должен изменяться по истечению времени
ValueChangedWithTimeout: true,
// Значения внешних отступов
Margin: "0,8,10,8",
Width: 600, // Ширина временной шкалы
Height: 200 // Высота
});
// Отобразим временную шкалу
timeline.show();
// Обновим её
timeline.refresh();
// Добавим временную шкалу в блок с идентификатором «timeline»
timeline.addToNode(document.getElementById("timeline"));
});
</script>
Для выполнения пользовательских сценариев над временной шкалой, в том числе примеров, приведённых на страницах описания свойств, методов и событий данного компонента, требуется разместить код либо после указанного выше сценария, либо в консоли браузера.
3. В теге <body> разместить блок с идентификатором «timeline» для хранения созданной временной шкалы:
<div id="timeline" style="border: #CCCCCC 1px solid; width: 600px; height: 40px;"> </div>
В результате выполнения примера на html-странице будет размещён компонента PP.Ui.Timeline:
При превышении ширины компонента, будут добавлены стрелки навигации:
См. также: