DES/JavaScript: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
(6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
JavaScript-Code, der nicht direkt in der DES-Webanwendung enthalten ist, wird hier verwaltet: https://gitlab.genealogy.net/project/des-javascript | |||
== Zurücksetzen des Eingabefensters == | |||
Ein großer Teil der Eingabefelder wird automatisch zurückgesetzt. Wenn man jedoch mit zusammengesetzten Eingabeelemente (s.u.) arbeitet, bleiben manche Werte erhalten. Es handelt sich bei dem Eingabefenster ja stets um ein und dasselbe div-Element. Daher gibt es einen Hook, der automatisch beim Abschicken aufgerufen wird: | |||
<source lang="javascript"> | |||
function resetInputFormHook() { | |||
// Hier können Felder zurückgesetzt werden, z.B. | |||
$('#select3A').val(''); | |||
$('#select3B').val(''); | |||
} | |||
</source> | |||
== Sonderzeichen == | |||
Man kann im Eingabefenster leicht eine Zeile mit Sonderzeichen-Buttons erzeugen. Zunächst bindet man die JavaScript-Bibliothek ein: | |||
<source lang="xml"> | |||
<script type="text/javascript" src="https://files.genealogy.net/DES/js/specialCharacters.js"></script> | |||
</source> | |||
Dann fügt man an die Stelle, an der die Sonderzeichen-Buttons erscheinen sollen, folgendes Element ein: | |||
<source lang="xml"> | |||
<div id="specialCharacters"></div> | |||
</source> | |||
Schließlich fügt folgender Funktionsaufruf im JavaScript-Code des Projekts die Buttons ein: | |||
<source lang="javascript"> | |||
$( document ).ready(function() { | |||
createSpecialCharacterList('ČŠŽčěłőřšżž', true); | |||
}); | |||
</source> | |||
== Zusammensetzen von Werte mit Hilfe einzelner Eingabeelemente == | == Zusammensetzen von Werte mit Hilfe einzelner Eingabeelemente == | ||
Oben in die Eingabemaske wird folgender JavaScript-Code (in <tt><script type="text/javascript"></tt> eingeschlossen) eingefügt: | Oben in die Eingabemaske wird folgender JavaScript-Code (in <tt><script type="text/javascript"></tt> eingeschlossen) eingefügt: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
function combine() { | function combine() { | ||
$("#inputFormValue03").val( ($( "#select0" ).val() + " " +$( "#select1" ).val() + $("#select2").val() + $("#select3" ).val() +" "+$("#select4").val()).trim()); | $("#inputFormValue03").val( ($( "#select0" ).val() + " " +$( "#select1" ).val() + $("#select2").val() + $("#select3" ).val() +" "+$("#select4").val()).trim()); | ||
Zeile 22: | Zeile 51: | ||
<input oninput="combine();" id="selectListeNummer" size="5" type="text" /> | <input oninput="combine();" id="selectListeNummer" size="5" type="text" /> | ||
</source> | </source> | ||
== Automatische Groß- und Kleinschreibung == | |||
In den HTML-Code des Eingabeformulars muss das casifyName-Skript eingebunden werden: | |||
<source lang="xml"> | |||
<script type="text/javascript" src="https://files.genealogy.net/DES/js/casifyName4.js"></script> | |||
</source> | |||
Jedes Feld, für das die automatische Groß- und Kleinschreibung aktiviert werden soll, bekommt die Klasse <tt>des-autocase</tt> zugewiesen, z.B. | |||
<source lang="xml"> | |||
<input id="inputFormLastName" class="des-autocase" type="text" size="30" name="lastName" /> | |||
</source> | |||
Wie bei allen Komfortfunktionen müssen diese im Javascript-Code des Projektes aktiviert werden: | |||
<source lang="javascript"> | |||
$( document ).ready(function() { | |||
desActivate(); | |||
}); | |||
</source> | |||
== Mitnahme von Werten (Cookies == | |||
In den HTML-Code des Eingabeformulars muss das testV1-Skript eingebunden werden: | |||
<source lang="xml"> | |||
<script type="text/javascript" src="https://files.genealogy.net/DES/js/testV1.js"></script> | |||
</source> | |||
Jede Tabellen'''zeile''', für die das Merken aktiviert werden soll, muss mit <tt>class="des-remember"</tt> und einem id-Attribut versehen werden. Zusätzlich benötigt jedes Eingabefeld, dass gemerkt werden kann noch <tt>class="CookieValue TabStop"</tt>. Das sieht z.B. so aus: | |||
<source lang="xml"> | |||
<tr id="name" class="des-remember"> | |||
<td>Nachname/Vorname</td> | |||
<td> | |||
<input id="inputFormLastName" class="CookieValue TabStop" type="text" size="30" name="lastName" /> | |||
<input id="inputFormFirstName" class="CookieValue TabStop" type="text" size="30" name="firstName" /> | |||
</td> | |||
</tr> | |||
</source> | |||
Wie bei allen Komfortfunktionen müssen diese im Javascript-Code des Projektes aktiviert werden: | |||
<source lang="javascript"> | |||
$( document ).ready(function() { | |||
desActivate(); | |||
}); | |||
</source> | |||
[[Kategorie:DES]] |
Aktuelle Version vom 23. Januar 2017, 07:15 Uhr
JavaScript-Code, der nicht direkt in der DES-Webanwendung enthalten ist, wird hier verwaltet: https://gitlab.genealogy.net/project/des-javascript
Zurücksetzen des Eingabefensters
Ein großer Teil der Eingabefelder wird automatisch zurückgesetzt. Wenn man jedoch mit zusammengesetzten Eingabeelemente (s.u.) arbeitet, bleiben manche Werte erhalten. Es handelt sich bei dem Eingabefenster ja stets um ein und dasselbe div-Element. Daher gibt es einen Hook, der automatisch beim Abschicken aufgerufen wird:
function resetInputFormHook() {
// Hier können Felder zurückgesetzt werden, z.B.
$('#select3A').val('');
$('#select3B').val('');
}
Sonderzeichen
Man kann im Eingabefenster leicht eine Zeile mit Sonderzeichen-Buttons erzeugen. Zunächst bindet man die JavaScript-Bibliothek ein:
<script type="text/javascript" src="https://files.genealogy.net/DES/js/specialCharacters.js"></script>
Dann fügt man an die Stelle, an der die Sonderzeichen-Buttons erscheinen sollen, folgendes Element ein:
<div id="specialCharacters"></div>
Schließlich fügt folgender Funktionsaufruf im JavaScript-Code des Projekts die Buttons ein:
$( document ).ready(function() {
createSpecialCharacterList('ČŠŽčěłőřšżž', true);
});
Zusammensetzen von Werte mit Hilfe einzelner Eingabeelemente
Oben in die Eingabemaske wird folgender JavaScript-Code (in <script type="text/javascript"> eingeschlossen) eingefügt:
function combine() {
$("#inputFormValue03").val( ($( "#select0" ).val() + " " +$( "#select1" ).val() + $("#select2").val() + $("#select3" ).val() +" "+$("#select4").val()).trim());
$("#inputFormValue02").val($("#selectListe").val()+" "+$("#selectListeNummer").val() );
$("#inputFormValue08").val($("#select5").val());
}
im Eingabeformular:
<input id="inputFormValue02" name="value02" type="hidden"/>
<select onchange="combine();" id="selectListe">
<option selected="selected"></option>
<option>A</option>
<option>B</option>
<option>xxx nicht in Liste xxx</option>
</select>
<input oninput="combine();" id="selectListeNummer" size="5" type="text" />
Automatische Groß- und Kleinschreibung
In den HTML-Code des Eingabeformulars muss das casifyName-Skript eingebunden werden:
<script type="text/javascript" src="https://files.genealogy.net/DES/js/casifyName4.js"></script>
Jedes Feld, für das die automatische Groß- und Kleinschreibung aktiviert werden soll, bekommt die Klasse des-autocase zugewiesen, z.B.
<input id="inputFormLastName" class="des-autocase" type="text" size="30" name="lastName" />
Wie bei allen Komfortfunktionen müssen diese im Javascript-Code des Projektes aktiviert werden:
$( document ).ready(function() {
desActivate();
});
Mitnahme von Werten (Cookies
In den HTML-Code des Eingabeformulars muss das testV1-Skript eingebunden werden:
<script type="text/javascript" src="https://files.genealogy.net/DES/js/testV1.js"></script>
Jede Tabellenzeile, für die das Merken aktiviert werden soll, muss mit class="des-remember" und einem id-Attribut versehen werden. Zusätzlich benötigt jedes Eingabefeld, dass gemerkt werden kann noch class="CookieValue TabStop". Das sieht z.B. so aus:
<tr id="name" class="des-remember">
<td>Nachname/Vorname</td>
<td>
<input id="inputFormLastName" class="CookieValue TabStop" type="text" size="30" name="lastName" />
<input id="inputFormFirstName" class="CookieValue TabStop" type="text" size="30" name="firstName" />
</td>
</tr>
Wie bei allen Komfortfunktionen müssen diese im Javascript-Code des Projektes aktiviert werden:
$( document ).ready(function() {
desActivate();
});