zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Befehl für Link mit onClick

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.05.2010, 15:25
Wissensbegierig
neuer user
Thread-Ersteller
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard Befehl für Link mit onClick

Hi zusammen,

ich habe folgendes Javascript um bestimmte Elemente ein- und ausblenden zu lassen. Wie müsste den hier der onClick Befehl im HTML aussehen um ein Element ein bzw. ausblenden zu lassen? Kann man das irgendwie rauslesen? Den mit dem Skript wird der Link automatisch aus einem Titel-Attribut "generiert" und ich würde den Link gerne einzeln nutzen, kann aber mit Javascript nicht wirklich viel anfangen. Mit Probieren bin ich bisher nicht weitergekommen.

Hier das Javascript das genutzt wird:
Code:
/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "toggleElements"
 * Version: 1.3, 11.09.2007
 * by Andreas Eberhard, andreas.eberhard@gmail.com
 *                      http://jquery.andreaseberhard.de/
 *
 * Copyright (c) 2007 Andreas Eberhard
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Changelog:
 *    11.09.2007 Version 1.3
 *    - removed noConflict
 *    - added 'opened'-state via additional class 'opened'
 *    02.07.2007 Version 1.2.1
 *    - changed blur to work with jQuery 1.1.3
 *    - added packed version
 *    27.06.2007 Version 1.2
 *    - suppress multiple animations
 *    15.06.2007 Version 1.1
 *    - added callbacks onClick, onShow, onHide
 *    - added option showTitle
 *    31.05.2007 initial Version 1.0
 * --------------------------------------------------------------------
 * @example $(function(){$('div.toggler-1').toggleElements( );});
 * @desc Toggles the div with class 'toggler-1' into closed state on document.ready
 *
 * @example $(function(){$('fieldset.toggler-9').toggleElements( { fxAnimation:'show', fxSpeed:1000, className:'toggler', onClick:doOnClick, onHide:doOnHide, onShow:doOnShow } );});
 * @desc Toggles the fieldset with class 'toggler-9' into closed state on document.ready
 *       Animation show with speed 1000 ms is used, for the different states the css-class-prefix 'toggler-' will be used
 *       Events OnClick, OnHide, OnShow will call your JavaScript-functions
 * --------------------------------------------------------------------
 */

var toggleElements_animating = false;

(function($) {

jQuery.fn.toggleElements = function(settings) {

	// Settings
	settings = jQuery.extend({
		fxAnimation: "slide",   // slide, show, fade
		fxSpeed: "normal",   // slow, normal, fast or number of milliseconds
		className: "toggler",
		removeTitle: true,
		showTitle: false,
		onClick: null,
		onHide: null,
		onShow: null
	}, settings);

	var onClick = settings.onClick, onHide = settings.onHide, onShow = settings.onShow;

	if ((settings.fxAnimation!='slide')&&(settings.fxAnimation!='show')&&(settings.fxAnimation!='fade'))
		settings.fxAnimation='slide';

	// First hide all elements without class 'opened'
	this.each(function(){
		if (jQuery(this).attr('class').indexOf("opened")==-1){
			jQuery(this).hide();
		}
	});

	// Add Toggle-Links before elements
	this.each(function(){

		wtitle='';
		wlinktext=jQuery(this).attr('title');

		if (settings.showTitle==true) wtitle=wlinktext;
		if (settings.removeTitle==true) jQuery(this).attr('title','');

		if (jQuery(this).attr('class').indexOf("opened")!=-1){
			jQuery(this).before('<a class="'+settings.className+' '+settings.className+'-opened" href="#" title="'+ wtitle +'">' + wlinktext + '</a>');
			jQuery(this).addClass(settings.className+'-c-opened');
		} else {
			jQuery(this).before('<a class="'+settings.className+' '+settings.className+'-closed" href="#" title="'+ wtitle +'">' + wlinktext + '</a>');
			jQuery(this).addClass(settings.className+'-c-closed');
		}
		
		// Click-Function for Toggle-Link
		jQuery(this).prev('a.'+settings.className).click(function() {

			if (toggleElements_animating) return false;

			thelink = this;
			jQuery(thelink)[0].blur();

			if (thelink.animating||toggleElements_animating) return false;
			toggleElements_animating = true;
			thelink.animating = true;

			// Callback onClick
			if ( typeof onClick == 'function' && onClick(thelink) === false) {
				toggleElements_animating = false;
				thelink.animating = false;
				return false;
			}

			// Hide Element
			if (jQuery(this).next().css('display')=='block') {
				jQuery(this).next().each(function(){
					if (settings.fxAnimation == 'slide') jQuery(this).slideUp(settings.fxSpeed,function(){
						jQuery.toggleElementsHidden(this,settings.className,onHide,thelink);
					});
					if (settings.fxAnimation == 'show') jQuery(this).hide(settings.fxSpeed,function(){
						jQuery.toggleElementsHidden(this,settings.className,onHide,thelink);
					});
					if (settings.fxAnimation == 'fade') jQuery(this).fadeOut(settings.fxSpeed,function(){
						jQuery.toggleElementsHidden(this,settings.className,onHide,thelink);
					});
				});
			// Show Element
			} else {
				jQuery(this).next().each(function(){
					if (settings.fxAnimation == 'slide') jQuery(this).slideDown(settings.fxSpeed,function(){
						jQuery.toggleElementsShown(this,settings.className,onShow,thelink);
					});
					if (settings.fxAnimation == 'show')  jQuery(this).show(settings.fxSpeed,function(){
						jQuery.toggleElementsShown(this,settings.className,onShow,thelink);
					});
					if (settings.fxAnimation == 'fade')  jQuery(this).fadeIn(settings.fxSpeed,function(){
						jQuery.toggleElementsShown(this,settings.className,onShow,thelink);
					});
				});
			}
			return false;

		});

	});

};

// Remove/Add classes to Toggler-Link
jQuery.toggleElementsHidden = function(el,cname,onHide,thelink) {
	jQuery(el).prev('a.'+cname).removeClass(cname+'-opened').addClass(cname+'-closed').blur();
	if ( typeof onHide == 'function') onHide(this); // Callback onHide
	jQuery(el).removeClass(cname+'-c-opened').addClass(cname+'-c-closed');
	toggleElements_animating = false;
	thelink.animating = false;
};
jQuery.toggleElementsShown = function(el,cname,onShow,thelink) {
	jQuery(el).prev('a.'+cname).removeClass(cname+'-closed').addClass(cname+'-opened').blur();
	if ( typeof onShow == 'function') onShow(this); // Callback onShow
	jQuery(el).removeClass(cname+'-c-closed').addClass(cname+'-c-opened');
	toggleElements_animating = false;
	thelink.animating = false;
};

})(jQuery);
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.05.2010, 09:11
Wissensbegierig
neuer user
Thread-Ersteller
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

Also ich meine einfach wie der Befehl bei einem <a href="#" onclick="welcheFunktion();">ausblenden</a> aussehen müsste. Falls ich mich unverständlich ausgedrückt habe.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.05.2010, 13:14
Oni Oni ist offline
Benutzer
neuer user
 
Registriert seit: 18.12.2007
Beiträge: 37
Oni befindet sich auf einem aufstrebenden Ast
Standard

hmmm, bin zwar auch nicht so der Javascript Kenner aber auf den ersten Blick würde ich sagen dass du das einfacher lösen könntest mit einem Framework wie zB. Prototype.

Mit Proto. beispielsweise nutzt du dann einfach die Methode toggle() und gut ist
Mit Zitat antworten
  #4 (permalink)  
Alt 21.05.2010, 13:27
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.964
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Mit dem von ihm genutzten Framework jquery wird es ähnlich einfach gehen, dazu muss man aber die Doku lesen.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.05.2010, 17:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2009
Beiträge: 436
Austen sorgt für eine eindrucksvolle AtmosphäreAusten sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn man schon in zwei Foren postet, gehört es sich eigentlich, die Themen gegenseitig zu verlinken...
Mit Zitat antworten
  #6 (permalink)  
Alt 24.05.2010, 10:46
Wissensbegierig
neuer user
Thread-Ersteller
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Austen Beitrag anzeigen
Wenn man schon in zwei Foren postet, gehört es sich eigentlich, die Themen gegenseitig zu verlinken...
Wozu? Sehe keinen Sinn dahinter.
Mit Zitat antworten
  #7 (permalink)  
Alt 24.05.2010, 11:07
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Synoxis Beitrag anzeigen
Wozu? Sehe keinen Sinn dahinter.
Weil in einem Forum die Leutz noch die Köppe rauchen lassen, während das Problem im anderen schon längst gelöst ist.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.05.2010, 22:00
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.964
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Synoxis Beitrag anzeigen
Wozu? Sehe keinen Sinn dahinter.
Vielleicht aus Höflichkeit und Respekt gegenüber denen die dir helfen solen?
Mit Zitat antworten
  #9 (permalink)  
Alt 25.05.2010, 09:31
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.964
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Nicht zwei Foren, sondern mindestens drei Befehl für Link mit onClick
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.05.2010, 14:50
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Ding Ding Ding Ding, Daylie Record!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
clearen im 21 Jhr. Muamicus CSS 23 14.12.2010 19:50
ul richtig zentrieren Muamicus CSS 23 14.12.2010 18:28
Definitionsliste in einer Floatumgebung *pi CSS 11 07.01.2009 18:34
Ständig wechselnde Bilder, Werbung Vybsi (X)HTML 17 24.01.2008 23:00
CSS Navigationsproblem thesecretboy CSS 0 12.04.2007 08:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:13 Uhr.