Beiträge getaggt mit jquery

Weiter-Button in verschachtelten Tabs

In verschachtelten Tabs, die mit jQuery erstellt wurden, sollte eine Navigation mittels Weiter-Button umgesetzt werden. Für einfache Tabs habe ich einige Beispiele gefunden:
jQuery UI Tabs with Next/Previous oder jQuery Tabs Next Button. Allerdings sind in diesem Fall die Tabs verschachtelt. d.h. innerhalb von Tabs befinden sich wiederum Tabs: Tab A enthält Tabs A1, A2 und A3, Tab B enthält B1, B2 und B3 und C hat keine Subtabs. Wenn man also in A3 angekommen ist, sollte der Weiter-Button zu B1 verweisen. Weiterhin sollte die normale Tab-Navigation (also das Anklicken der Tab-Titel) weiterhin funktionieren. Wenn man also den Tab A2 auswählt, sollte der Weiter-Button immer noch auf A3 springen lassen.

<div id="tab">
	<ul>
		<li><a href="#tab-a">A</a></li>
		<li><a href="#tab-b">B</a></li>
		<li><a href="#tab-c">C</a></li>
	</ul>
	<div id="tab-a">
		<ul>
			<li><a href="#tab-a1">A1</a></li>
			<li><a href="#tab-a2">A2</a></li>
			<li><a href="#tab-a3">A3</a></li>
		</ul>
		<div id="a1">
			Inhalt A1
		</div>
		<div id="a2">
			Inhalt A2
		</div>
		<div id="a3">
			Inhalt A3
		</div>
	</div>
	<div id="tab-b">
		<ul>
			<li><a href="#tab-b1">B1</a></li>
			<li><a href="#tab-b2">B2</a></li>
			<li><a href="#tab-b3">B3</a></li>
		</ul>
	</div>
	[... usw]
</div>

Ich habe einen Button implementiert, der sich außerhalb der Tabs befindet. Damit eine Navigation möglich ist, müssen die Tab-Objekte gespeichert werden:

var $firstLevel = $('#tabs').tabs();	
var counter = 0;
$('#tabs .tabbed').each( function(index, elem) {
	var cid = $(elem).parent().attr('id');
	tabObjects[counter] = $(elem).tabs();
	counter++;
});

Wenn der Weiter-Button geklickt wird, wird ermittelt, welcher Tab der ersten Ebene gerade aktiv ist. Falls es Tabs der zweiten Ebene gibt, wird ermittelt, welcher von denen gerade aktiv ist. Dann wird geprüft, ob auf den Tab der zweiten Ebene Geschwister-Elemente folgen. Wenn ja, dann wird der nächste aktiviert. Wenn nicht, dann wird der nächste Tab der ersten Ebene aktiviert.

$('#next-button a').click( function() {
	var selected = $firstLevel.tabs('option', 'selected');
	var tabId = $('#tabs > div').eq(selected).attr('id');
	$subTab = tabObjects[selected];
 
	var length = $firstLevel.tabs('length');
	if($subTab != undefined) {
		var subSelected = $subTab.tabs('option', 'selected');
		var subLength = $subTab.tabs('length');
		if(subSelected + 1 < subLength) {
			/*
			 * switch to next tab
			 */
			$subTab.tabs('select', subSelected + 1);
		} else if(selected + 1 < length) {
			/*
			 * switch no next parent tab
			 */
			$firstLevel.tabs('select', selected + 1);
			if(length == selected + 2) {
				$(this).hide();
			}
			$subTab = tabObjects[selected + 1];
			if($subTab != undefined) {
				$subTab.tabs('select', 0);
			}
		}
	} else {
		$firstLevel.tabs('select', selected + 1);
	}
});

jQuery: Tinyscrollbar innerhalb von Tabs

Wenn man das jQuery Plugin Tiny Scrollbar für Inhalte eines Tabs verwendet, dann wird die Höhe des Elements nicht korrekt berechnet und die Funktionalität nicht gesetzt. Eine Erklärung dafür gibt es auf der jQuery Tabs-Seite: der Tab-Inhalt ist versteckt, daher können die Dimensionen nicht berechnet werden.
Man kann den Tiny Scrollbar aber aktivieren, wenn der Tab (vorausgesetzt es ist nicht der erste und sichtbare) sichtbar wird.

$('#tabs').bind('tabsshow', function(event, ui) {
	if (ui.panel.id == "tab1") {
		$('#content1').tinyscrollbar();
	} else if(ui.panel.id == "tab2") {
		$('#content2').tinyscrollbar();
	}
});

Tags: ,

Geschrieben in javascript | Kommentare deaktiviert für jQuery: Tinyscrollbar innerhalb von Tabs

Erweiterung jQuery Carousel

Ich wollte das jQuery-Carousel, das auf dieser Seite mit vielen schönen Beispielen vorgestellt wird, ein wenig anpassen, und zwar sollte es mehr möglichkeiten geben, die Buttons und die Paginierung zu positionieren, als bisher. So sollte es möglich sein, dass die Prev/Next-Buttons um die Paginierung herum gepackt werden können.
jQuery Carousel
Als erstes habe ich für den Parameter btnsPosition weitere Optionen hinzugefügt: after, paginationOutside und paginationInside. Bei after werden die Buttons beide hinter das Carousel gepackt, bei paginationOutside werden die Buttons direkt vor und hinter die Paginierung gepackt und bei paginationInside vor und hinter die Paginierung, allerdings innerhalb des umschließenden Divs.

if(params.btnsPosition == "after") {
	params.prevBtnInsert = "insertAfter";
	params.nextBtnInsert = "insertAfter";
}
if(params.btnsPosition == "paginationOutside") {
	params.prevBtnInsert = "insertBefore";
	params.nextBtnInsert = "insertAfter";
	params.btnsPosition = "pagination";
}
if(params.btnsPosition == "paginationInside") {
	params.prevBtnInsert = "prepend";
	params.nextBtnInsert = "append";
	params.btnsPosition = "pagination";
}
// Prev Button
if ($.isFunction(env.params.prevBtnInsertFn)) {
	env.$elts.prevBtn = env.params.prevBtnInsertFn(env.$elts);
} else { 
	if(env.params.pagination && params.btnsPosition == "pagination") {
		env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.pagination);
	} else if (params.btnsPosition == "outside"){
		env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.carousel);
	} else {
		env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.wrap);
	}
}
 
// Next Button
if ($.isFunction(env.params.nextBtnInsertFn)) {
	env.$elts.nextBtn = env.params.nextBtnInsertFn(env.$elts);
} else {
	if(env.params.pagination && params.btnsPosition == "pagination") {
		env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.pagination);
	} else if (params.btnsPosition == "outside"){
		env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.carousel);
	} else {
		env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.wrap);
	}
}

Die letzten beiden Optionen werden nur dann ausgewertet, wenn die Paginierung an ist.

jQuery Validation

Um Formulare Client-seitig zu validieren, gibt es ein Plugin für jQuery: jQuery Validation

Damit ist es möglich, Formulare vor dem Absenden fast automatisch zu validieren, die Ausgabe der Fehlermeldungen kann auch gesteuert werden. Außerdem ist es möglich, eigene Validierungsfunktionen hinzuzufügen. Hier sind die Beispiele, nach denen ich länger suchen musste.

Validieren eines Felder in Abhängigkeit eines anderen:
Das Feld number_nights ist nur dann obligatorisch, wenn die Checkbox ‚checkbox‘ angekreuzt ist.

$("#dateForm").validate({
  rules: {
    "data[number_nights]" : {
      required: function() {
        return $('#checkbox').is(":checked");
      },
      min: 1,
      digits: true
    },

Definieren einer eigenen Validierungsfunktion:
Die Felder number_singlerooms und number_doublerooms sind beide obligatorisch und dürfen nur Zahlen (digits) enthalten. Dadurch ist aber nicht sichergestellt, dass in Summe mindenstens 1 rauskommt, daher definiere ich eine eigene Validierungsfunktion und weise sie den Feldern hinzu.

jQuery.validator.addMethod("minNumberRooms", function(value, element) {
  var sumRooms = $('#field_number_singlerooms').val() + $('#field_number_doublerooms').val();
  return this.optional(element) || (sumRooms > 0);
}, "Bitte wählen Sie mindesten ein Zimmer");
 
$("#dateForm").validate({
  rules: {
    "data[number_singlerooms]" : {
      required: true,
        digits: true,
        minNumberRooms : true
      },
      "data[number_doublerooms]" : {
        required: true,
        digits: true,
      minNumberRooms : true
    },

Quelle: http://stackoverflow.com/questions/241145/jquery-validate-plugin-how-to-create-a-simple-custom-rule

Linksammlung JavaScript

jQuery Plugins

  • Color Box: die jQuery Alternative zu Lightbox (die auf Prototype basiert), sehr einfach anzuwenden
  • Confirm: eine Bestätigungsfunktion, dabei taucht neben einem Link zum Löschen die Abfrage auf, mit der man die auszuführende Aktion bestätigt
  • Numeric Stepper: kleines Eingabefeld, versehen mit Button, ermöglicht das erhöhen/verringern eines Wertes um einen vorher angebenen Wert (Schritweite), kennt man als Flex-Komponente

Tags:

Geschrieben in javascript | Kommentare deaktiviert für Linksammlung JavaScript