Пример создания компонента ParetoDialog

Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:

1. Добавить ссылки на следующие css-файлы: PP.css, PP.Express.css.

Также нужно добавить ссылки на js-файлы: PP.js, PP.Metabase.js, PP.Express.js, resources.ru.js.

2. Затем в теге <head> дополнительно задаётся стиль для элементов:

<style type="text/css">
body, html
{
    height: 100%;
    width: 100%; 
    margin: 0;
    padding: 0;
    overflow: hidden;
} 
</style>

3. Далее в теге <head> необходимо добавить скрипт, который создает диалог для настройки распределения данных по Парето:

<script type="text/javascript">
    var metabase, eaxAnalyzer, eaxMbService, waiter, paretoDialog;
    var IMAGE_PATH = "../Debug/img/";
    var info, eax;
    function Ready() {    
        // Установим языковые настройки для ресурсов 
        PP.setCurrentCulture(PP.Cultures.ru);
        // Укажем путь к корневой папке, содержащей файлы ресурсов
        PP.resourceManager.setRootResourcesFolder("../resources/");
    }
    // Функция для создания диалога настройки «ПервыеN % » распределения по Парето
    function openDial() {    
        // Создаем компонент
        paretoDialog = new PP.Ui.ParetoDialog({
            Width: 400,
            Height: 230,
            Id: "FirstNPercent", // Настройка «Первые N%»         
            ResourceKey: "ExpRibbonTableParetoDialogFirstNPercent",
            Type: "percent", // Тип - проценты         
            LabelResourceKey: "ExpRibbonTableParetoDialogLabel",
            DescriptionResourceKey: "ExpRibbonTableParetoDialogFirstNPercentDescription"    
        });    
        // Отобразим компонент     
        paretoDialog.show();
    }    
</script>

4. В теге <body> в качестве значения атрибута «onLoad» указываем имя функции для установки локали для ресурсов и задания пути к корневой папке, в которой они располагаются. Внутри тега размещаем кнопку, по нажатию на которую будет создан диалог для настройки распределения данных по Парето:

<body onselectstart="return false" class="PPNoSelect" onload="Ready()">
    <!-- Кнопка, по нажатию на которую будет создан диалог настройки «Первые N%» 
         распределения по Парето -->
    <input type="button" value="Отобразить paretoDialog" onclick="openDial()" />
</body>

5. В конце документа вставляем код, устанавливающий стили к вершине «document.body», соответствующие операционной системе клиента:

<script type="text/javascript">
    PP.initOS(document.body);
</script>

В результате выполнения примера после нажатия кнопки «Отобразить paretoDialog» на html-странице будет размещен компонент ParetoDialog:

См. также:

ParetoDialog