kostenloser Webspace werbefrei: lima-city

Jquery class + unbekannte

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   m*****z

   20:13, 10.1.2012

   Hallo leute,
   
   Ich öffne momentan über einen opener ein inline popup über JQuery.
   Nun habe ich mehrere Button dafür, um mehrere Popup zu öffnen.
   Ich möchte aber nicht für jedes neue Popup und jeden neuen Button einen neuen Javascriptcode schreiben müssen.
   Also möchte ich das gerne dynamisch machen, das wenn der Button die ID "opener1" hat soll das Popup geöffnet werden und die datei "load.php?platz=1" geöffnet werden. Gibt es einen Button "opener2" soll das Popup geladen werden und die Datei "load.php?platz=2" dort hinein. ... und das immer so weiter geführt. Wie mache ich das?
   
   mein code sieht momentan so aus:
   

   $(function() {
   	
   	   $( "#opener" ).click(function() {
   		  $( "#dialog" ).dialog();
   		  $( "#dialog" ).load("load.php);
   	   });
   	   
   });

   
   
   Für eure Hilfe wäre ich euch sehr Dankbar.
   MFG Monkeyz

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. lema-industry

   lema-industry hat kostenlosen Webspace.

   21:50, 10.1.2012

   Hey (: ,
   hatte auch das gleiche problem, dann habe ich gegooglet und hab diesen js-code gefunden:

   /**
   [code]
   
   
   var jsPopup = {
   
   	triggerClass : "bildergalerie",
   
   	oversize : false,
   
   	lastMouseCoords : { x : 0, y : 0 },
   
   	galleries : [],
   
   	init : function () {
   		var scripts = document.getElementsByTagName("script"),
   			t = this,
   			oldWinOnLoad = window.onload,
   			css, i, setting, _setting, v, _v;
   
   		window.onload = function () {
   			if (typeof (oldWinOnLoad) == "function")
   				oldWinOnLoad();
   
   			t.initPopupBox();
   		};
   
   		for (i = 0; i < scripts.length; i++) {
   			if (scripts[i].src && scripts[i].src.match(/\/js_popup.js\b/i)) {
   				t.baseURL = scripts[i].src.replace(/\/js_popup\.js.*/, "/");
   			}
   		}
   
   		document.getElementsByTagName("head")[0].appendChild(t.createHTMLElement({
   			tagName : "link",
   			rel : "stylesheet",
   			media : "screen, projection",
   			href : t.baseURL + "js_popup.css"
   		}));
   	},
   
   	initPopupBox : function () {
   		var allElements = document.getElementsByTagName("*"),
   			t = this,
   			oldDocOnMouseMove = document.onmousemove,
   			oldDocOnClick = document.onclick,
   			oldWinOnResize = window.onresize,
   			i, a, links, test;
   
   		// alle Galerien ermitteln
   		for (i = 0; i < allElements.length; i++) {
   			if (allElements[i].className.indexOf(t.triggerClass) != -1) {
   				/* Das Class-Attribut eines HTML-Elementes kann mehrere Klassennamen enthalten,
   				die alle durch Leerzeichen getrennt sind. Diese Leerzeichen werden nun durch
   				Kommata ersetzt, ebenso am Anfang und Ende je ein Komma hinzugefügt, sodass der
   				gesuchte Klassenname zwischen zwei Kommas stehen muss, wenn er denn für dieses
   				Element existiert. */
   				test = "," + allElements[i].className.split(" ").join(",") + ",";
   
   				if (test.indexOf("," + t.triggerClass + ",") != -1)
   					t.galleries.push({elm : allElements[i]});
   			}
   		}
   
   		for (i = 0; i < t.galleries.length; i++) {
   			// alle Bilder-Links eines gefundenen Elternelements mit der Popup-Funktion erweitern
   			links = t.galleries[i].elm.getElementsByTagName("a");
   
   			for (a = 0; a < links.length; a++) {
   				// jedes Link-Element auf enthaltendes Bild überprüfen
   				if (links[a].getElementsByTagName("img")[0]
   					&& links[a].href.match(/\.(gif|jpg|jpeg|png)\b/i)
   				) {
   					// Popup-Funktion anbringen
   					links[a].onclick = function () {
   						return t.preload(this);
   					};
   
   					if (!t.galleries[i].imageLinks) {
   						t.galleries[i].imageLinks = new Array();
   					}
   
   					t.galleries[i].imageLinks.push(links[a]);
   				}
   			}
   		}
   
   		if (t.galleries.length) {
   			document.onclick = function (e) {
   				if (typeof(oldDocOnClick) == "function") {
   					oldDocOnClick(e);
   				}
   
   				e = e || window.event;
   				t.lastHoverElement = e.srcElement || e.target;
   
   				return t.hover(e);
   			};
   
   			document.onmousemove = function (e) {
   				if (typeof(oldDocOnMouseMove) == "function") {
   					oldDocOnMouseMove(e);
   				}
   
   				e = e || window.event;
   				t.lastMouseCoords.x = e.clientX;
   				t.lastMouseCoords.y = e.clientY;
   
   				if (typeof(t.viewPort.scrollLeft) == "number") {
   					t.lastMouseCoords.x += t.viewPort.scrollLeft;
   					t.lastMouseCoords.y +=  t.viewPort.scrollTop;
   				}
   
   				t.lastHoverElement = e.srcElement || e.target;
   
   				return t.hover(e);
   			};
   
   			window.onresize = function (e) {
   				if (typeof(oldWinOnResize) == "function") {
   					oldWinOnResize(e);
   				}
   
   				return t.display();
   			};
   
   			t.viewPort = (document.compatMode && document.compatMode == "CSS1Compat") ?
   				document.documentElement : document.body || null;
   
   			t.background = t.createHTMLElement({
   				tagName : "div",
   				id : "js-popup-background"
   			});
   			document.body.appendChild(t.background);
   
   			t.box = t.createHTMLElement({
   				tagName : "div",
   				id : "js-popup-box"
   			});
   			document.body.appendChild(t.box);
   
   			t.image = t.createHTMLElement({
   				tagName : "img",
   				id : "js-popup-image"
   			});
   			t.box.appendChild(t.image);
   
   			t.caption = document.createTextNode("...");
   			t.box.appendChild(t.caption);
   
   			t.closeIcon = t.createHTMLElement({
   				tagName : "span",
   				id : "js-popup-close"
   			});
   			t.box.appendChild(t.closeIcon);
   
   			t.resizeIcon = t.createHTMLElement({
   				tagName : "span",
   				id : "js-popup-resize"
   			});
   			t.box.appendChild(t.resizeIcon);
   
   			t.nextIcon = t.createHTMLElement({
   				tagName : "span",
   				id : "js-popup-next"
   			});
   			t.box.appendChild(t.nextIcon);
   
   			t.prevIcon = t.createHTMLElement({
   				tagName : "span",
   				id : "js-popup-prev"
   			});
   			t.box.appendChild(t.prevIcon);
   
   			t.waitIcon = t.createHTMLElement({
   				tagName : "span",
   				id : "js-popup-wait"
   			});
   			t.box.appendChild(t.waitIcon);
   		}
   	},
   
   	preload : function (linkObj) {
   		var t = this,
   			caption, g, i;
   
   		// IE
   		if (window.event) {
   			window.event.returnValue = false;
   		}
   
   		// Resized-Darstellung und Popup-Abmessungen für die Ladeanzeige setzen
   		t.preloadImage = new Image();
   		t.preloadImage.src = linkObj.href;
   
   		t.box.style.width = "150px";
   		t.box.style.height = "150px";
   		t.image.style.display = "none";
   		t.image.src = "";
   		t.image.height = 0;
   		t.image.width = 0;
   		t.waitIcon.style.display = "block";
   		t.resizeIcon.style.display = "";
   		t.caption.data = "";
   
   		t.center();
   
   		// passendes Galerie-Objekt finden und dem box-Objekt zuordnen
   		t.currentGallery = null;
   		t.galleryIndex = null;
   
   		for (g = 0; g < t.galleries.length; g++) {
   			for (i = 0; i < t.galleries[g].imageLinks.length; i++) {
   				if (t.galleries[g].imageLinks[i] === linkObj) {
   					t.currentGallery = t.galleries[g];
   					t.galleryIndex = i;
   				}
   			}
   		}
   
   		// Bildunterschrift für die Vollansicht vorbereiten
   		caption = linkObj.getElementsByTagName("img")[0].getAttribute("alt");
   		t.preloadImage.caption = (caption && caption != "") ? caption : "...";
   
   		if (t.preloadImage.width > 0) {
   			// Bild schon im Cache geladen? -> Sofort anzeigen
   			t.display();
   		} else {
   			// Eventhandler setzen, damit nach dem Laden eine Anzeige kommt
   			t.preloadImage.onload = function () { t.display(); };
   			t.preloadImage.onerror = function () { t.display(); };
   			t.hover({type:0});
   		}
   
   		// Link-Ausführung verhindern
   		return false;
   	},
   
   	display : function () {
   		var t = this,
   			maxHeight = t.viewPort.clientHeight - 30,
   			maxWidth = t.viewPort.clientWidth - 30,
   			ratio = t.preloadImage.width / t.preloadImage.height,
   			scaled;
   
   		t.waitIcon.style.display = "";
   		t.image.src = t.preloadImage.src;
   		t.image.width = t.preloadImage.width;
   		t.image.height = t.preloadImage.height;
   		t.image.style.display = "";
   		t.caption.data = t.preloadImage.caption;
   		t.box.style.height = "";
   		t.box.style.width = "";
   
   		if (t.image.width > maxWidth) {
   			t.image.width = maxWidth;
   			t.image.height = Math.floor(maxWidth / ratio);
   		}
   
   		if (t.image.height > maxHeight) {
   			t.image.height = maxHeight;
   			t.image.width = Math.floor(maxHeight * ratio);
   		}
   
   		if (t.image.width != t.preloadImage.width
   			|| t.image.height != t.preloadImage.height
   		) {
   			// Bild wird verkleinert angezeigt?
   			if (t.image.width < t.preloadImage.width) {
   				t.resizeIcon.className = "small";
   			} else {
   				t.resizeIcon.className = "small";
   			}
   
   			t.resizeIcon.style.display = "block";
   
   		} else {
   			t.resizeIcon.style.display = "";
   			t.resizeIcon.className = "";
   		}
   
   		return t.center();
   	},
   
   	center : function () {
   		var t = this,
   			top, left;
   
   		// Background vollen Viewport ausfüllen lassen
   		t.background.style.width = t.viewPort.scrollWidth + "px";
   		t.background.style.height = t.viewPort.scrollHeight + "px";
   		t.background.style.display = "block";
   
   		// zentrierte Position der Box errechnen
   		left = t.viewPort.scrollLeft + Math.floor(
   			(t.viewPort.clientWidth - t.box.offsetWidth) / 2
   		);
   
   		top = t.viewPort.scrollTop + Math.floor(
   			(t.viewPort.clientHeight - t.box.offsetHeight) / 2
   		);
   
   		t.box.style.left = (left > 0 ? left : 0) + "px";
   		t.box.style.top = (top > 0 ? top : 0) + "px";
   		t.box.style.display = "block";
   
   		return t.hover({type:0});
   	},
   
   	hide : function () {
   		var t = this;
   
   		t.box.style.display = "";
   		t.background.style.display = "";
   	},
   
   	hover : function (e) {
   		var t = this,
   			dir, next;
   
   		if (e.type == "click"
   			&& (t.lastHoverElement == t.background || t.lastHoverElement == t.closeIcon)
   		) {
   			t.hide();
   		}
   
   		if (e.type == "click"
   			&& t.lastHoverElement == t.resizeIcon
   		) {
   			if (t.image.width < t.preloadImage.width
   				|| t.image.height < t.preloadImage.height
   			) {
   				t.resizeIcon.className = "full";
   				t.image.height = t.preloadImage.height;
   				t.image.width = t.preloadImage.width;
   
   				t.center();
   
   			} else {
   				t.display();
   			}
   		}
   
   		if ((t.lastHoverElement == t.box || t.lastHoverElement.parentNode == t.box)
   			&& t.currentGallery
   			&& t.currentGallery.imageLinks.length > 1
   		) {
   			// Hover-Bild anzeigen?
   			t.nextIcon.style.display = "";
   			t.prevIcon.style.display = "";
   			t.image.className = "";
   
   			// Ja. Nächstes oder vorheriges?
   			dir = t.lastMouseCoords.x;
   			dir -= t.box.offsetLeft;
   			next = t.galleryIndex + (dir > t.box.offsetWidth / 2 ? 1 : -1);
   
   			if (next >= 0 && next < t.galleryIndex) {
   				t.prevIcon.style.display = "block";
   				t.prevIcon.style.top = Math.floor(
   					(t.image.height - t.prevIcon.offsetHeight) / 2
   				) + "px";
   				t.image.className = "change";
   
   				if (e.type == "click"
   					&& (t.lastHoverElement == t.box
   						|| t.lastHoverElement == t.image
   						|| t.lastHoverElement == t.prevIcon
   					)
   				) {
   					t.preload(t.currentGallery.imageLinks[next]);
   				}
   			}
   
   			if (next
   				&& next < t.currentGallery.imageLinks.length
   				&& next > t.galleryIndex
   			) {
   				t.nextIcon.style.display = "block";
   				t.nextIcon.style.top = Math.floor(
   					(t.image.height - t.nextIcon.offsetHeight) / 2
   				) + "px";
   				t.image.className = "change";
   
   				if (e.type == "click"
   					&& (t.lastHoverElement == t.box
   						|| t.lastHoverElement == t.image
   						|| t.lastHoverElement == t.nextIcon
   					)
   				) {
   					t.preload(t.currentGallery.imageLinks[next]);
   				}
   			}
   		}
   
   		if (t.image.style.display == "none"
   			|| (t.lastHoverElement != t.box && t.lastHoverElement.parentNode != t.box)
   		) {
   			t.prevIcon.style.display = "";
   			t.nextIcon.style.display = "";
   		}
   
   		return true;
   	},
   
   	createHTMLElement : function (params) {
   		var el, p;
   		/* "params" ist ein Objekt, das folgende Eigenschaften haben kann:
   			{ 	tagName : "p", // z.B. für <p>
   				text : "Textinhalt" // als Text-ChildNode des Elements
   				... // weitere (native) Eigenschaften des HTML-Elementobjekts (z.B. id, className etc.)
   			} */
   		if (params.tagName && params.tagName.match(/[a-z]/)) {
   			el = document.createElement(params.tagName);
   
   			for (p in params) {
   				if (p.match(/^text/i)) {
   					el.appendChild(document.createTextNode(params[p]));
   				} else {
   					if (!p.match(/^tagname$/i)) {
   						el[p] = params[p];
   					}
   				}
   			}
   		}
   
   		return el;
   	}
   };
   
   
   // Die Popup-Funktionalität initialisieren
   jsPopup.init();

   
   
   Bei mir hats funktioniert ;)
   Hoffe ich konnte dir helfen
   MfG Danii :D
   
   Beitrag zuletzt geändert: 10.1.2012 21:51:16 von lema-industry
4. Autor dieses Themas

   m*****z

   12:15, 11.1.2012

   Nein dass ist leider nicht das richtige :(
   Aber Danke für deine Bemühungen.

5. all-web

   all-web hat kostenlosen Webspace.

   12:49, 11.1.2012

   Heyhou,
   
   ich glaube ich verstehe, was du meinst.
   Sinnvoller wäre es, wenn du die click() funktion nicht auf eine ID setzt, sondern auf eine klasse. wenn du es auf ne ID beziehst, funktions ja eben nur bei genau diesem element. machst du mit einer klasse, kannst du jedem "popup-Link" die funktion zuweisen.
   Dann musst du noch die ID an die zu ladende Datei übermitteln und schon ist gut.
   
   Beispiel HTML Code:
   
   

   <a class="popupteil" id="1" href="blaah.blah">Link 1</a>
   <a class="popupteil" id="2" href="blaah.blah">Link 2</a>
   <a id="2" href="blaah.blah">Hier wird nichts per ajax geladen, da klasse fehlt</a>
   <a class="popupteil" id="3" href="blaah.blah">Link 3</a>

   
   
   Und das passende jquery dazu:
   

   $(function() {
   	$( ".popupteil" ).click(function() {
   		//Speichere die ID des angeklickten Links in variabel
   		var id = $(this).attr(id);
   		
   			// Lade die Datei per GET, damit du die variabel einfach übermitteln kannst
   			$.get(load.php', {"platz": id}, function(data){
   				//das was es macht, wenn die Datei geladen wurde. Schreibe also zB in #content rein
   				$("#content").html(data);
   				
   				//Ein Tipp: Breche die Navigation zu der Seite hiermit ab, dann kannst du in den <a> tag normal n href angeben, der aber nur zum Einsatz kommmt wenn das jquery nicht funktioniert /javascript nicht aktiviert ist
   				return false;
   			});
   		});
   });

   
   
   Habe es nicht getestet, sollte aber funktionieren. Ich hoffe, du verstehst mein input.
   Falls du in dem nachgeladenen Inhalt ebenfalls solche Links hast, musst du live() anstatt click() verwenden, damit das DOM weiter überwacht wird.
   
   Bei Fragen einfach ne PN :)
   
   Gruss Sublime
   
   Beitrag zuletzt geändert: 11.1.2012 12:50:20 von all-web
6. Autor dieses Themas

   m*****z

   18:02, 11.1.2012

   Leicht abgeändert funktioniert es!!!
   Danke! Ich habe garnicht daran gedacht die ID dafür zu nutzen.
   Das hat mich jetzt echt weiter gebracht.

7. fabo

   fabo hat kostenlosen Webspace.

   22:16, 14.1.2012

   Du musst nicht einmal ID's verwenden. JQuery verfügt über eine Menge verschiedener Selektoren (sogar Regex-Selektoren).

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?