Beispiel: jQuery-Schaltfläche erstellen

In diesem Beispiel wird gezeigt, wie Sie beim Erstellen einer Coach-Ansicht eine externe Bibliothek eines anderen Anbieters (z. B. jQery) verwenden können.

1. So fügen Sie benutzerdefinierten HTML-Code zu einer Coach-Ansicht hinzu:
   1. Ziehen Sie auf der Seite 'Layout' das Advanced-Element Benutzerdefinierter HTML-Code in den Erstellungsbereich.
   2. Wählen Sie in den Eigenschaften unter HTML die Option Text aus und geben Sie anschließend den benutzerdefinierten HTML-Code an. In diesem Beispiel können Sie den folgenden Code verwenden, um eine jQuery-Schaltfläche zu erstellen:

      <input type="button" class="Jquerybutton" name="jbtnName" value="default"></input>

2. Laden Sie eine komprimierte Datei (.zip) hoch, in der die jQuery-Bibliotheksassets und -Style-Sheets enthalten sind, und wählen Sie aus, welche Dateien berücksichtigt werden sollen:
   1. Klicken Sie in der Liste der Bibliotheksassets auf das Pluszeichen neben Dateien und wählen Sie in der Liste der Komponenten den Eintrag Serverdatei aus.
   2. Wählen Sie die komprimierte Datei mit den jQuery-Bibliotheksassets (in diesem Beispiel jQuery.zip) aus und klicken Sie anschließend auf Fertigstellen.
   3. Öffnen Sie nach dem Hochladen der Datei die Registerkarte Verhalten der Coach-Ansicht und klicken Sie auf das Pluszeichen neben Eingeschlossene Scripts.
   4. Klicken Sie in der Liste der Serverdateien auf das Pfeilsymbol neben jQuery.zip, um den Inhalt der hochgeladenen Datei anzuzeigen.
   5. Wählen Sie eine Datei aus, die eingeschlossen werden soll. Jede einzuschließende Datei muss einzeln ausgewählt werden. Die CSS-Dateien (.css) werden in einer bestimmten Reihenfolge eingeschlossen. In diesem Beispiel werden die folgenden Dateien in der angegebenen Reihenfolge eingeschlossen:
      • jquery-1.4.js
      • jquery-ui-1.8.custom.min.js
      • core.css
      • jquery-ui-1.8.custom.css
3. Wählen Sie unter Ereignishandler das Element load aus und geben Sie anschließend das benutzerdefinierte Script an. In diesem Beispiel können Sie das folgende Script verwenden:

   var _this = this;
   $('.Jquerybutton', this.context.element).button(
   {label: this.context.options._metadata.label.get("value")}).bind('click', function() {
   _this.context.trigger(function() { console.log("jQuery button boundary event handled");})
   }); 

   Tabelle 1. Informationen zum Script

   Element	Beschreibung
   this.context.options._metadata.label.get("value")	Ruft den Bezeichnungswert aus den Konfigurationsoptionen ab.
   this.context.trigger(...)	Löst ein Grenzereignis aus, wenn auf die Schaltfläche geklickt wird. Wenn das Grenzereignis mit dem nächsten Schritt in einem Benutzerservicediagramm verbunden ist, wird durch Klicken auf die Schaltfläche ein Übergang (zum nächsten Schritt) ausgelöst.

4. Klicken Sie auf Speichern oder auf Bearbeitung beenden.