zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Mootools Fx.Slide erweitern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.06.2012, 11:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.05.2010
Beiträge: 43
Overtone befindet sich auf einem aufstrebenden Ast
Standard Mootools Fx.Slide erweitern

Ich habe Mootools Fx.Slide auf einer Webseite mittels der Toggle-Funktion per Mausklick umgesetzt (im Prinzip identisch zu der Demo auf der Mootools-Projektseite). Auf einen zweiten Button habe ich diese Funktion per Mouseover umgesetzt. Nun stellt sich für mich die Frage: Ist es sinnvoll und technisch möglich das Ganze auf einen Button umzusetzen:

DIV ist zunächst geschlossen
Bei Mouseover slidet das DIV auf
Bei Mouseout slidet das DIV zu
Bei Mouseover und gleichzeitigem oder nachträglichem Klick soll das DIV aufsliden und natürlich gleichzeitig den Script für das Mouseout stoppen/unterbinden, da das DIV jetzt ja bis zum nächsten Klick offen bleiben soll.
Nach dem Schließen-Klick soll dann natürlich wieder die Mouseover-Funktion zur Verfügung stehen.
Insgesamt gibt es auf der Seite bis zu 10 solcher Hilfe-DIV´s!

Wird diese Idee/Umsetzung zu Schwierigkeiten führen? Haltet Ihr das überhaupt für sinnvoll? Im Gegenzug weiß ein Laie natürlich auch nicht wozu es hier dann zwei "Hilfe"-, oder "weiter lesen"-Button gibt. Falls ich nur einen Button einsetze wäre ich an "toggle" per Mausklick gebunden, da der eine oder andere event. den Text aus dem Hilfe-DIV markieren und/oder kopieren möchte!

Geändert von Overtone (16.06.2012 um 11:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2012, 13:48
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zeig doch mal deinen Code, JsFiddle bietet sich dafür an.

Möglich ist das sicher, eventuell bietet sich ein eigenes Objekt (Mootools Class) dafür an. Die Lösung ist wahrscheinlich sogar recht simpel, da du das Auf- und Zuklappen schon mit „mouseenter“ und „mouseleave“ realisiert hast, müsstest du bei Klick nur einen boolschen Wert setzen, der deinen Slide offen hält oder eben nicht. Wenn du nicht auf das mouseleave-Event warten möchtest, kannst du das Einklappen auch schon beim Klick auslösen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.06.2012, 22:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.05.2010
Beiträge: 43
Overtone befindet sich auf einem aufstrebenden Ast
Standard

Also wie bereits erwähnt der Code von der Mootools-Demoseite leicht angepasst:

HTML-Code:
<h3 class="section">Fx.Slide Vertical</h3>
 
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>
 
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
sowie der Javascript:

Code:
		window.addEvent('domready', function(){
			//-vertical
			
			var mySlide = new Fx.Slide('test').hide();

			$('slidein').addEvent('mouseenter', function(e){
				e = new Event(e);
				mySlide.slideIn();
				e.stop();
			});
			
			$('slideout').addEvent('mouseenter', function(e){
				e = new Event(e);
				mySlide.slideOut();
				e.stop();
			});
			
			$('toggle').addEvent('click', function(e){
				e = new Event(e);
				mySlide.toggle();
				e.stop();
			});
			
			$('hide').addEvents({
    mouseenter: function(e){
				e = new Event(e);
				mySlide.slideIn();
				e.stop();
    },
    mouseleave: function(e){
				e = new Event(e);
				mySlide.slideOut();
				e.stop();
    }
			});
und die eingebundene JS-Bibliothek mootools.svn.js!
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2012, 08:12
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Dein Code ist nicht lauffähig, außerdem ist das 1:1 das Beispiel (bis auf die fehlenden Klammern). Hast du keinen eigenen Versuch gestartet?

Edit:
Ok, jetzt hat es mich doch nicht losgelassen, hier eine mögliche Lösung:
Code:
var SlideControl = new Class({

	slide: null,
	control: null,
	isPinned: false,

	initialize: function(slide, control, options) {
		this.slide = new Fx.Slide(slide, options).hide();
		this.control = control.addEvents({
			'mouseenter': function(e) {
				this.slide.slideIn();
			}.bind(this),
			'mouseleave': function(e) {
				if (!this.isPinned) {
					this.slide.slideOut();
				}
			}.bind(this),
			'click': function(e) {
				if (!this.isPinned) {
					this.isPinned = true;
				} else {
					this.isPinned = false;
				}
			}.bind(this)
		});
	}

});

window.addEvent('domready', function() {
	new SlideControl($('test'), $('toggle'));
});

Geändert von inta (21.06.2012 um 08:46 Uhr)
Mit Zitat antworten
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
Link ausblenden nach Klick (Mootools Fx.Slide) Synoxis Javascript & Ajax 1 20.05.2010 14:33
mootools Fx.Slide: ohne Mausklick öffnen hailander Javascript & Ajax 4 28.01.2010 15:23
FX.Slide von Mootools - Wie per KLICK alle Slide auf einmal ainblenden? nadine1984 Javascript & Ajax 12 12.09.2009 10:49
FX.Slide von MooTools - Erfahrungen? charlie Javascript & Ajax 3 06.09.2008 13:09
MooTools: Fx.Slide - konfiguration img Javascript & Ajax 0 27.06.2008 13:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:23 Uhr.