Linguaggio: HTML | XAML

Guida introduttiva: Aggiunta della Guida dell'app (HTML)

Applies to Windows only

Questa guida introduttiva illustra come aggiungere un riquadro a comparsa Guida al riquadro Impostazioni usando HTML e l'oggetto SettingsFlyout per la Libreria Windows per JavaScript (WinJS). Per visualizzare un riquadro a comparsa Guida in un'app completa, vedi Esempio di impostazioni dell'app.

Nell'esempio seguente definirai un riquadro a comparsa Impostazioni, denominato Guida, in un file HTML (HelpUI.html). Potrai quindi inizializzare il riquadro a comparsa Impostazioni e popolare il riquadro Impostazioni usando JavaScript.

Usi C#/Visual Basic/C++ e XAML? Vedi Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).

Vedi questa funzionalità in azione nell'ambito della serie di argomenti su funzionalità delle app dall'inizio alla fine:  Interfaccia utente delle app di Windows Store, dall'inizio alla fine.

Prerequisiti

Leggi le Linee guida per la Guida dell'app e le Linee guida per le impostazioni dell'app.

Istruzioni

1. Definisci il riquadro a comparsa Help.

Crea un file HTML denominato "HelpUI.html".


<!DOCTYPE html>
<html>
<head>
    <title>Help Settings flyout</title>
</head>
<body>
    <!-- BEGINTEMPLATE: Template code for an empty Help flyout. -->
    <!-- Each Settings flyout should be defined in its own HTML file. -->
    <!-- Set data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create 
         a wide flyout. -->
    <!-- Set the background color for the header to the background color defined
         for your app tile in the manifest. -->
    <div data-win-control="WinJS.UI.SettingsFlyout"
         data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
        <div class="win-ui-dark win-header" title="Help">
            <button type="button" 
                    onclick="WinJS.UI.SettingsFlyout.show()"
                    class="win-backbutton"></button>
            <div class="win-label">Help</div>
        </div>
        <div class="win-content">
            <!-- Help content here -->
        </div>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>


Nota  Per impostazione predefinita, il riquadro a comparsa sarà "stretto", con una larghezza di 346 px. Imposta l'attributo data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" per creare un riquadro a comparsa largo (646 px).

2. Elabora il riquadro a comparsa di impostazioni e popola il riquadro delle impostazioni.

Il codice seguente elabora il riquadro a comparsa Impostazioni e popola il SettingsPane con JavaScript. Chiama questa funzione durante l'attivazione dell'app.


function initializeSettings() {
    // Initialize Settings flyout(s) and WinJS controls.
    WinJS.UI.processAll();
    
    // Populate Settings pane and tie commands to Settings flyouts.
    WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = {
            "helpDiv": { href: "HelpUI.html", title: "Help"}
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
    WinJS.Application.start();
}


Nota  Chiama la funzione dopo l'inizializzazione di DOM. L'inizializzazione di DOM non è necessaria se chiami initializeSettings dalla funzione onactivated; l'evento activated si verifica dopo l'evento DOMContentLoaded. Per altre info, vedi Ottimizzazione del ciclo di vita dell'app (app di Windows Store scritte in JavaScript e HTML).

Riepilogo e passaggi successivi

In questa guida introduttiva abbiamo imparato ad aggiungere la Guida dell'app al riquadro delle impostazioni usando HTML e la Libreria Windows per JavaScript.

Ora puoi imparare a includere la Guida in linea nella pagina di Guida usando gli iframe.

Come includere contenuto online nella Guida

Argomenti correlati

Esempio di impostazioni dell'applicazione
Guida introduttiva: Aggiunta di impostazioni all'app
WinJS.UI.SettingsFlyout
Windows.UI.ApplicationSettings.SettingsPane
Linee guida per la Guida dell'app
Linee guida per le impostazioni dell'app
Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)
Ottimizzazione del ciclo di vita dell'app (app di Windows Store scritte in JavaScript e HTML)

 

 

Mostra:
© 2015 Microsoft