初始化应用程序

on_page_loaded 事件是应用程序在客户端触发的第一个事件。

新项目使用 on_page_loaded 事件处理程序来动态构建应用程序的主菜单，并使用 JQuery 为菜单项添加点击事件处理程序。

function on_page_loaded(task) {

    $("title").text(task.item_caption);
    $("#app-title").text(task.item_caption);

    if (task.small_font) {
        $('html').css('font-size', '14px');
    }
    if (task.full_width) {
        $('#container').removeClass('container').addClass('container-fluid');
    }

    if (task.safe_mode) {
        $("#user-info").text(task.user_info.role_name + ' ' + task.user_info.user_name);
        $('#log-out')
        .show()
        .click(function(e) {
            e.preventDefault();
            task.logout();
        });
    }

    $('#container').show();

    task.create_menu($("#menu"), $("#content"), {
        splash_screen: '<h1 class="text-center">Jam.py Demo Application</h1>',
        view_first: true
    });
}

此事件处理程序使用 JQuery 从 index.html 中选择元素，以设置它们的属性并分配事件。

<div id="container" class="container" style="display: none">
    <nav class="navbar navbar-expand-lg bg-light mb-2">
        <div class="container-fluid">
            <span id="app-title" class="navbar-brand mb-0 h1"></span>
            <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbar-content">
            <ul id="menu" class="navbar-nav me-auto mb-2 mb-lg-0">
            </ul>
            <div class="d-flex pe-2 justify-content-end">
                <span id="user-info" class="navbar-text p-2"></span>
                <button id="log-out" class="btn btn-secondary" type="button" style="display: none"><i class="bi bi-box-arrow-right"></i></button>
            </div>
        </div>
      </div>
    </nav>
    <div id="content">
    </div>
</div>

最后，调用任务的 create_menu 方法来动态创建项目主菜单。