jQuery Plugin-Entwicklung (Tutorial)

Letztes Semester habe ich eine Seminararbeit zum Thema jQuery Plugin-Entwicklung geschrieben die ich euch nicht vorenthalten will. Soviel ich weiß gibt es im Netz kein ausführliches Tutorial zum Thema Plugin-Entwicklung auf Deutsch. Die Arbeit enthält sehr viel Quellcode-Auszüge und praktische Beispiele.

Inhaltsverzeichnis

• Einleitung
• HTML
• CSS
• JavaScript
• Ajax
• JavaScript Grundlagen
• Lambda-Funktion
• Unmittelbare Ausführung einer Lambda-Funktion
• Gültigkeitsbereiche von Variablen
• Globaler Gültigkeitsbereich
• Lokaler Gültigkeitsbereich
• jQuery
• Marktanteile
• Wie funktioniert jQuery eigentlich?
• Plugins
• Namenskonventionen
• Neue jQuery-Objekt-Methode
• Pseudonym $ beibehalten
• Verketteter Aufruf
• Mehrere Objekte behandeln, each() verwenden
• Einstellungen und Optionen
• Offentlicher Zugriff auf Plugin-Standardwerte
• Plugin Erweiterung offerieren
• Private Funktionen
• Callback-Mechanismen anbieten
• Fazit

Screenshots

Download

jQuery Plugin-Entwicklung – Frank Roth – 2013.pdf

jQuery escape HTML

Leider verfügt jQuery über keine Funktion HTML-Tags zu escapen, also um diese nicht zu interpretieren. Abhilfe verschafft eine sehr einfache Funktion die mittels der JavaScript-Funktion replace arbeitet.

jQuery.escapeHTML = function (text){
     return text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }

Aufrufen könnt ihr diese dann wie folgt:

$.escapeHTML("<b>Hallo Welt</b>");

JavaScript: Element aus Array löschen

Wenn ihr ein Element aus einem Array in JavaScript löschen wollt könnt ihr dies über eine spzielle Methode namens splice(). Das ganze funktioniert folgendermaßen.

// Array anlegen
var names = new Array("Peter","Klaus","Maria","Lukas");

// Maria löschen!
var deleteIndex = 2;

// Der erste Parameter gibt an ab welchem Index gelöscht werden soll.
// Der zweite wieviele einschließlich diesem Index herrausgelöscht werden sollen.
// In unserem fall lediglich einen, nämlich "Maria"
names.splice(deleteIndex,1);

// Übrig bleibt der Array: ["Peter","Klaus","Lukas"]

 

Ich hoffe ich konnte dem ein oder anderen helfen! 🙂

JQuery UI Dialog – Buttons anpassen

Gestern wollte ich etwas an einem JQuery UI Dialog anpassen, was scheinbar von Seitens der UI nicht ohne weiteres vorgesehen ist. Ich wollte den Buttons im Dialog seperate ID’s zuweisen, um sie später über Selektoren ansprechen zu können.

Eine Lösung, die ich hier im JQuery Forum gefunden habe nutzte mir auch nichts, da sich auf meiner Seite mehrere unterschiedliche Dialoge befanden und ich somit nie sicher sein konnte, das auch wirklich der richtige Button angesprochen wird.

Nach weiteren erfolglosen Versuchen habe ich dann einfach die eigentlich JQuery UI Funktion überschrieben und sie somit um meine gewünschte Funktionen erweitert.

$(function() {
	(function() {
		var dialogPrototype = $.ui.dialog.prototype;
		var originalButtons = dialogPrototype._createButtons;
		dialogPrototype._createButtons = function(buttons) {

			originalButtons.apply(this, arguments);

			var $buttons = this.element.siblings('.ui-dialog-buttonpane').find('button');

			var i = 0;
			for ( var label in buttons) {
				var button = buttons[label];
				var $button = $buttons.eq(i);

				if (button.title) {
					$button.attr('title', button.title);
				}

				if (button.classes) {
					$button.addClass(button.classes);
				}

				if (button.id) {
					$button.attr('id', button.id);
				}

				i += 1;
			}
		}

	})();

	// Dialog
	$('#dialog').dialog( {
		autoOpen : false,
		width : 600,
		buttons : {
			"Ok" : function() {
				$(this).dialog("close");
			},
			"Cancel" : $.extend(function() {
				$(this).dialog("close");
			}, {
				classes : 'dismiss',
				title : 'Abbrechen',
				id : 'thisIsTheId'
			})
		}
	});

	// Dialog Link
	$('#dialog_link').click(function() {
		$('#dialog').dialog('open');
		return false;
	});
});

Ich hoffe, dass ihr etwas damit anfangen könnt. Ansonsten bis zu meinem nächsten Blogeintrag! 😉