Category Archives: JavaScript
JavaScript CSV Download – Excel + Umlaute
var downloadCsv = function(content, fileName) { var a = document.createElement(‚a‘); mimeType = mimeType || ‚application/octet-stream‘; var mimeType = ‚text/csv;encoding:utf-8‘; var BOM = „\uFEFF“; content = BOM + content; if (navigator.msSaveBlob) { // IE10 navigator.msSaveBlob(new Blob([content], { type: mimeType }), fileName); } else if (URL && ‚download‘ in a) { //html5 A[download] a.href = URL.createObjectURL(new Blob([content], […]
Handlebars render Funktion wie bei Mustache
|
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 |
Handlebars.registerHelper('select', function (value, options) { // Create a select element var select = document.createElement('select'); // Populate it with the option HTML select.innerHTML = options.fn(this); // Set the value select.value = value; // Find the selected node, if it exists, add the selected attribute to it if (select.children[select.selectedIndex]) select.children[select.selectedIndex].setAttribute('selected', 'selected'); return select.innerHTML; }); Handlebars.render = Handlebars.render || function(tpl, data) { data = data || {}; var compiled = Handlebars.render.cache[tpl]; if (!compiled) { // Uncached template compiled = Handlebars.compile(tpl); Handlebars.render.cache[tpl] = compiled; } return compiled(data); }; Handlebars.render.cache = {}; |
IsNull in JavaScript
In SQL gibt es die tolle Funktion, wenn ein Wert nicht null ist, dann nimm diesen, ansonsten nimm die Alternative. Die Syntax dazu ist IsNull(‚meinWert,’Alternative‘). Um z.B. dem Nutzer kein null in einer Textbox anzuzeigen, habe ich eine Funktion geschrieben, die im Prinzip das gleiche macht.
|
1 2 3 |
function IsNull(exprValue, altValue) { return typeof exprValue == 'undefined' || exprValue == null ? altValue : exprValue; } |
Get Rekursive Object
Mit der folgenden Funktion kann man rekursiv ein Objekt in Javascript nach einem bestimmten Attribut durchsuchen. Das ganze auch noch ziemlich performant.
|
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 |
function getRecursiveObject(theObject,property,id) { var result = null; if (theObject instanceof Array) { for (var i = 0; i < theObject.length; i++) { result = getRecursiveObject(theObject[i], property, id); if (result) { break; } } } else { for (var prop in theObject) { if (prop == property) { if (theObject[prop] == id) { return theObject; } } if (theObject[prop] instanceof Object || theObject[prop] instanceof Array) { result = getRecursiveObject(theObject[prop], property, id); if (result) { break; } } } } return result; } |
Nützliche Javascript Bibliotheken
Ich mach hier mal eine kleine Sammlung von Javascript Bibliotheken, die ich vielleicht eines Tages gebrauchen kann. Forms Alternative Select Boxen https://select2.github.io/examples.html https://twitter.github.io/typeahead.js/ https://harvesthq.github.io/chosen/ http://rmm5t.github.io/jquery-flexselect/ http://loopj.com/jquery-tokeninput/ https://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/ https://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html# Multiple Select http://loudev.com/#demos Datepicker https://uxsolutions.github.io/bootstrap-datepicker/ http://amsul.ca/pickadate.js/ https://fullcalendar.io/ http://felicegattuso.com/projects/timedropper/ Daterange: http://www.daterangepicker.com/#examples http://rettica.com/caleran/docs/readme.html#caleran-date-range-picker Tables http://issues.wenzhixin.net.cn/bootstrap-table/ http://listjs.com/ Modal, PopUp http://dimsemenov.com/plugins/magnific-popup/ http://codeseven.github.io/toastr/demo.html http://likeastore.github.io/ngDialog/# http://qtip2.com/ List shortcuts: https://www.impressivewebs.com/demo-files/question-mark-js/ Treeview https://www.jstree.com/ Drag […]
JQuery Datepicker komplett in Deutsch mit Heute als Standard
Um den Datepicker komplett auf Deutsch nutzen zu können bedarf es einiger Änderungen es zunächst das Laden der CSS Datei:
|
1 |
<link href="client/css/jquery-ui/jquery-ui.min.css" rel="stylesheet"> |
dann das laden der JQuery files
|
1 2 3 |
<script src="client/js/jquery-ui.js"></script> <script src="client/js/jquery-1.9.1.min.js"></script> <script src="client/js/jquery.tools-1.2.7.min.js"></script> |
dann im <script> </script>:
|
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 |
function setdefaults() { $( "#deliveryDate" ).datepicker({ changeMonth: true, changeYear: true, firstDay: 1, showAnim: 'slideDown', dateFormat: 'dd.mm.yy', }); $("#deliveryDate").datepicker("setDate", new Date()); } jQuery(function($){ $.datepicker.regional['de'] = {clearText: 'löschen', clearStatus: 'aktuelles Datum löschen', closeText: 'schließen', closeStatus: 'ohne Änderungen schließen', prevText: '<zurück', prevStatus: 'letzten Monat zeigen', nextText: 'Vor>', nextStatus: 'nächsten Monat zeigen', currentText: 'heute', currentStatus: '', monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], monthStatus: 'anderen Monat anzeigen', yearStatus: 'anderes Jahr anzeigen', weekHeader: 'Wo', weekStatus: 'Woche des Monats', dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d', dateFormat: 'dd.mm.yy', firstDay: 1, initStatus: 'Wähle ein Datum', isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['de']); }); |
und zum Schluss den Textinput an sich:
|
1 |
<input class="txtEdit" id="deliveryDate" type="text" /> |
OpenStreetMap, OpenLayers Map anzeigen, Marker setzen und Route hinzufügen
einfacher Open Layer Code, mit dem man eine Linie zwischen 2 Punkten erstellen kann. Diese bekommen am Anfangspunkt einen Marker, am Ende einen Marker und dazwischen einen. Dies könnte z.B. so Aussehen:
Login