So wird's gemacht: Positionieren des Flyouts für die sekundäre Kachel (Apps im Metro-Stil mit JavaScript und HTML)

[Diese Dokumentation ist vorläufig. Änderungen vorbehalten.]

In diesem Thema erfahren Sie, wie Sie das Dialogfeld platzieren, in dem Benutzer bestätigen können, dass sie ein Element an die Startseite anheften möchten. Das Dialogfeld sollte neben dem Dialogfeld angezeigt werden, auf das geklickt bzw. das berührt wurde, um das Element anzuheften.

Wissenswertes

Technologien

  • Windows Runtime

Voraussetzungen

  • Grundkenntnisse der Begriffe und Konzepte für Kacheln und Benachrichtigungen. Weitere Informationen finden Sie unter Kacheln, Infoanzeiger und Benachrichtigungen.
  • Erfahrung im Arbeiten mit dem Dokumentobjektmodell (Document Object Model, DOM).
  • Kenntnisse zum Erstellen einer einfachen App im Metro-Stil mit JavaScript mithilfe von Windows Runtime-APIs.

Anweisungen

Schritt 1: Einschließen eines Elements in die Seite, das das Flyout für Anheften auslöst

Wenn Benutzer auf die Schaltfläche An "Start" anheften klicken oder sie berühren, wird das Bestätigungsdialogfeld angezeigt. Die Entscheidung, ob Inhalte an die Startseite angeheftet werden sollen, bleibt immer dem Benutzer überlassen.



<button class="action" id="pinTileButton">

Schritt 2: Ermitteln der Begrenzungskoordinaten des Clients für das Element

Da sich das Flyout in der Nähe des Elements befinden sollte, von dem es aufgerufen wurde, müssen Sie wissen, wo sich dieses Element befindet.



var element = document.getElementById("pinTileButton"),
var selectionRect = element.getBoundingClientRect();

Schritt 3: Anheften der sekundären Kachel und Übergeben der Position des Elements, von dem der Vorgang aufgerufen wurde

Rufen Sie die SecondaryTile.requestCreateAsync-Methode auf, die das Bestätigungsdialogfeld mit den bereitgestellten Koordinaten anzeigt, sodass das Dialogfeld in der Nähe des Aufrufpunkts angezeigt wird. Wenn Benutzer den Vorgang bestätigen, wird die Methode zurückgegeben, und Sie können fortfahren. In diesem Schritt wird angenommen, dass Sie bereits ein SecondaryTile-Objekt mit dem Namen "tile" erstellt haben. Weitere Informationen finden Sie unter Schnellstart: Anheften einer sekundären Kachel.



tile.requestCreateAsync({ x: selectionRect.left, y: selectionRect.top }).then(function (isPinned) {{
    if (isPinned) {
        // Proceed.
    } else {
        // The user canceled the operation or an error occurred.
    }
});

Verwandte Themen

Richtlinien und Prüfliste für Sekundärkacheln
Übersicht über Sekundärkacheln

 

 

Anzeigen:
© 2014 Microsoft