Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:
• JQuery
• Handlebars
• Tinycolor
• Bootstrap
• DSER Services
Anforderungen
Vollständiges Beispiel
API Dokumentation
Anforderungen
Vollständiges Beispiel
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css">
<link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div id="wertpapier-suche-container"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
<script type="text/javascript">
require(['dser.wertpapierSuche'], function () {
$("#wertpapier-suche-container").wertpapierSuche({
token: '<your-custom-api-token>',
onStockSelected: function(stock) {
console.log("selected stock", stock);
}
});
});
</script>
</body>
</html>
Dieses Beispiel zeigt das gewählte Wertpapier in der Browser Konsole.
API Dokumentation
Initialisieren
Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert.
$("#wertpapier-suche-container").wertpapierSuche({
token: '<your-custom-api-token>',
onStockSelected: function(stock) {
console.log("selected stock", stock);
}
});
Erforderliche Konfigurationsoptionen
Erweiterte und optionale Konfigurationsmöglichkeiten
Integration
Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.
Fügen Sie die Stylesheets in Ihre Seite ein
Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich.
<link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-suche/wertpapier-suche.css">
Erstellen eines Containers
Erstellen Sie einen <div> Container für diese Komponente in dem <body> Bereich. Sie können unser Standard CSS-Style verwenden, indem Sie die Klasse „dser-theme“ für den Container nutzen.
<div id="wertpapier-suche-container" ></div>
Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein
Es existieren 2 Wege um die Skriptdateien einzufügen:
Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS
• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron durch RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.
Implementieren der erforderlichen JavaSkript-Dateien
Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:
<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
Konfiguration und Initialisierung der Komponente
Fügen Sie diesen Block nach den Skript-Dateien ein:
<script type="text/javascript">
require(['dser.wertpapierSuche'], function () {
$("#wertpapier-suche-container").wertpapierSuche({
token: '<your-custom-api-token>'
});
});
</script>
Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS
• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.
Einfügen der erforderlichen Javascript-Dateien
Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/handlebars/handlebars.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/bloodhound/bloodhound.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/typeahead.jquery.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/color/ColorService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/services/StockService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/browser/BrowserUtils.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/speech/SpeechRecognition.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/wertpapier-suche/jquery.wertpapierSuche.js"></script>
Konfiguration und Initialisierung der Komponente
Fügen Sie diesen Block nach den Skript-Dateien ein:
<script type="text/javascript">
$(function () {
$("#wertpapier-suche-container").wertpapierSuche({
token: '<your-custom-api-token>'
});
});
</script>