jBox – eine hilfreiche Erweiterung für Scriptcase um Tooltips, modales Fenster, etc. anzuzeigen
jBox ist eine nützliche JavaScript Bibliothek, mit der Scriptcase erweitert werden kann.
Dazu kann man jBox auch als externe Scriptcase-Bibliothek einbinden und damit auch deployen.
Die Dokumentation und eine sehr schöne Sammlung an Beispielen findet man beim Hersteller unter
https://stephanwagner.me/jBox
Dort können Sie die Bibliothek auf herunterladen.
Beispiel 1:
Im Scriptcase onLoad-Event einer Control-Applikation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
?> <!-- jQuery ist in SC schon geladen ... <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> --> <!-- Lade jBox aus einer externen Scriptcase-Library mit Namen jbox --> <script src="<?php echo sc_url_library('sys', 'jbox', 'jBox-1.0.2/dist/jBox.all.min.js'); ?>"></script> <link href="<?php echo sc_url_library('sys', 'jbox', 'jBox-1.0.2/dist/jBox.all.min.css'); ?>" rel="stylesheet"> // Button zum Öffnen der Modalen Form: <button onclick="my_function()">Click me</button> <script> // Beispiel einer nicht an ein Element gebundener Model jBox (als Variable) // mit einer Function (siehe SC > JavaScript methods > my_function: my_button_click.open(); ) geöffnet wird. var my_button_click = new jBox('Modal', { title: 'Eingebettetes HTML... - die Seite https://asdw.de - PER BUTTON !', content: '<object type="text/html" data="https://asdw.de" width="1000px" height="900px" ></object>', width: 'auto', height: 'auto' }); // Lade die jBoxes, die an Elemente gebunden sind erst nach dem Window window.onload = function(){ // Beispiel einer modalen Form mit externem Inhalt - hier https://asdw.de // Wenn auf das Eingabefeld mit dem namen hover_me geklickt wird, erscheint die modale Form new jBox('Modal', { attach: '#id_sc_field_hover_me', title: 'Eingebettetes HTML... - die Seite https://asdw.de', content: '<object type="text/html" data="https://asdw.de" width="1000px" height="900px" ></object>', width: 'auto', height: 'auto' }); // Wenn auf das Label des Eingabefeldes geklickt wird, erscheint ein Tooltip new jBox('Tooltip', { attach: '#id_label_hover_me', title: 'Hurray my label!', }); } </script> <?php |
Beispiel 2:
In einem onLoad-Event einer Form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
?> // Load the sources // hint: jquery is already loaded with Scriptcase <script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v0.6.2/dist/jBox.all.min.js"></script> <link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v0.6.2/dist/jBox.all.min.css" rel="stylesheet"> <script> $(document).ready(function() { // make sure that the code is executed after the form has finished loading // sample for input-field test_1 - set tooltip for the input part $('#hidden_field_data_test_1').addClass('tooltip'); $('#hidden_field_data_test_1').prop('title', 'This is a tooltip for the input part of the field'); // sample for the label of input-field test_1 - set tooltip for the label part $('#id_label_test_1').addClass('tooltip').prop('title', 'This is a tooltip for the label'); // create new instance of jBox Tooltip new jBox('Tooltip', { attach: '.tooltip' }); }); </script> <?php |
In diesem Beispiel wird die Bibliothek dynamisch vom CDN geladen.
Dann wird an das Eingabefeld test 1 die Class tooltip und in der nächsten Zeile der Titel des zu erscheinenden Tooltips gesetzt.
Dito für das Label des Feldes.
Zuletzt wird die neue jBox für alle Elemente mit der Class tooltip geladen.
