Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Fx.Slide przeróbka
Forum PHP.pl > Forum > Przedszkole
RafaelX
21.01.2009, 11:36:11
Pobrałem Skrypt ze strony http://demos.mootools.net/Fx.Slide

Wszystko pieknie działa ale nie umiem zrobić tego tak ze na jednej stronie mam kikla takich rozwijanych pozycji.
Chodzi mi o to że mam jedną pod drugą belki, po kliknieciu pierwszą rozwija/zwija sie 1 belka w 2 rozwija sie 2 itd., próbowałem przerobić skrypt ale nie potrafię, działa mi tylko ta belka która jest najwyżej reszta sie nie otwiera;

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="mootools.js"></script>
  6. <script type="text/javascript">
  7. window.addEvent('domready', function() {
  8. 	var status = {
  9. 		'true': 'zamknij',
  10. 		'false': 'otworz'
  11. 	};
  12.  
  13. 	//-menu
  14.  
  15. 	var mymenuSlide = new Fx.Slide('menu_slide');
  16.  
  17. 	$('v_toggle').addEvent('click', function(e){
  18. 		e.stop();
  19. 		mymenuSlide.toggle();
  20. 	});
  21.  
  22.  
  23. 	// When menu Slide ends its transition, we check for its status
  24. 	// note that complete will not affect 'hide' and 'show' methods
  25. 	mymenuSlide.addEvent('complete', function() {
  26. 		$('menu_status').set('html', status[mymenuSlide.open]);
  27. 	});
  28. });
  29. </script>
  30. <title></title>
  31. </head>
  32. <body>
  33. 	<div><a id="v_toggle" href="#"><span id="menu_status">zamknij</span></a></div>
  34. 	<div id="menu_slide">Text<br /><br />w<br /><br />menu</div>
  35.  
  36. 		<div>asd</div>
  37.  
  38. 	<div><a id="v_toggle" href="#"><span id="menu_status">zamknij</span></a></div>
  39. 	<div id="menu_slide">Text<br /><br />w<br /><br />menu</div>
  40.  
  41. </body>
  42. </html>
[HTML] pobierz, plaintext


pliku mootools.js nie dołączam bo jest zbyt obszerny....

Bardzo proszę o pomoc w przerobieniu tego lub ewentualnie propozycje innego skryptu

Pozdro :V



@Edit

Jako że nikt mi nie pomógł po dłuższym kombinowaniu wpadłem na prosty pomysł, teraz skrypt wygląda tak

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="mootools.js"></script>
  6. <script type="text/javascript">
  7. function slider(id)
  8. {
  9.   window.addEvent('domready', function() {
  10. 	var status = {
  11. 		'true': 'zamknij',
  12. 		'false': 'otworz'
  13. 	};
  14. 	var mymenuSlide = new Fx.Slide('zaw_slide'+id);
  15.  
  16. 	$('slide'+id).addEvent('click', function(e){
  17. 		e.stop();
  18. 		mymenuSlide.toggle();
  19. 	});
  20.  
  21. 	mymenuSlide.addEvent('complete', function() {
  22. 		$('s_status'+id).set('html', status[mymenuSlide.open]);
  23. 	});
  24.   });
  25. }
  26.  
  27. </script>
  28. <style>
  29. .status	{color:red;}
  30. </style>
  31. <title>haha działa tongue.gif</title>
  32. </head>
  33. <body>
  34. 	<div><a id="slide1" ><span class="status" id="s_status1" onclick="slider('1')">zamknij</span></a></div>
  35. 	<div id="zaw_slide1">Text<br />-<br />w<br />-<br />menu</div>
  36. 		<div>asd</div>
  37. 	<div><a id="slide2" ><span class="status" id="s_status2" onclick="slider('2')">zamknij</span></a></div>
  38. 	<div id="zaw_slide2">Text<br />-<br />w<br />-<br />menu</div>
  39. 		<div>asd</div>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext


Pytanie czy to jest optymalne rozwiązanie?? jeśli ktos by mógł mi powiedzieć jak to mozna prościej rozwiązać, jak sie da oczywiście, to byłbym wdzieczny.
gebp
21.01.2009, 13:38:23
Zaglądnij jeszcze TUTAJ. Co prawda jest klasa AJAX'a ale posiada kilka "bajerów".
RafaelX
21.01.2009, 13:49:03
Doszedłem do wniosku ze i tak to będzie trochę badziewne, muszę zrobić to tak żeby pozycje początkową (zwinięte/rozwinięte) można było zapisać w cookies, lecz nie bardzo mi to wychodzi jak ktoś potrafi, albo ma jakiś inny skrypt to bardzo proszę o pomoc
skowron-line
21.01.2009, 13:50:28
http://www.consideropen.com/blog/2008/12/3...day-23-fxslide/
no i
http://www.consideropen.com/blog/2008/08/3...to-the-library/
RafaelX
21.01.2009, 23:00:55
Jakoś to przerobiłem i działa, ale nie jestem zbyt dobry w JS wiec jeśli ktoś moze niech spróbuje poprawić mi mój kod, tak żeby był maxymalnie krótki
[HTML] pobierz, plaintext 
  1. function czytaj_ciacho(nazwa)
  2. {
  3. nazwa+="=";
  4. startCookie=document.cookie.indexOf(nazwa);
  5. if (startCookie==-1) {return ""}
  6. startCookie+=nazwa.length;
  7. if (document.cookie.indexOf(";",startCookie)==-1)
  8. {
  9. koniecCookie=document.cookie.length;
  10. }
  11. else
  12. {
  13. koniecCookie=document.cookie.indexOf(";",startCookie);
  14. }
  15. textCookie=document.cookie.substring(startCookie,koniecCookie);
  16. textCookie=unescape(textCookie);
  17. return textCookie;
  18. }
  19.  
  20. function cooki_update(ciacho)
  21. {
  22. if (czytaj_ciacho(ciacho)=='2' | !czytaj_ciacho(ciacho)) 
  23. {
  24. document.cookie=ciacho+"=1"
  25. }
  26. else
  27. {
  28. document.cookie=ciacho+"=2"
  29. }
  30. }
  31.  
  32. window.addEvent('domready', function() {
  33. 	var status1 = {
  34. 		'true': '<img onclick=\'document.cookie="ciastko1=2"' src="images/off.png" alt="" />',
  35. 		'false': '<img onclick=\'document.cookie="ciastko1=1"' src="images/on.png" alt="" />'
  36. 	};
  37. 	var status2 = {
  38. 		'true': '<img onclick=\'document.cookie="ciastko2=2"' src="images/off.png" alt="" />',
  39. 		'false': '<img onclick=\'document.cookie="ciastko2=1"' src="images/on.png" alt="" />'
  40. 	};
  41. 	if (czytaj_ciacho("ciastko1")=='1')  {
  42. 	var mymenuSlide1 = new Fx.Slide('zaw_slide1', {transition: 'sine:in',duration: 300, });
  43. 	$('slide1').addEvent('click', function(){  mymenuSlide1.toggle(); 
  44. 	});	
  45. 	mymenuSlide1.addEvent('complete', function() {
  46. 	$('s_status1').set('html', status1[mymenuSlide1.open]);
  47. 	});
  48. 	};
  49.  
  50. 	if (czytaj_ciacho("ciastko1")=='2' | !czytaj_ciacho("ciastko1"))  {
  51. 	var mymenuSlide1 = new Fx.Slide('zaw_slide1', {transition: 'sine:in',duration: 300, }).hide();
  52. 	$('slide1').addEvent('click', function(){  mymenuSlide1.toggle(); 
  53. 	});	
  54. 	mymenuSlide1.addEvent('complete', function() {
  55. 	$('s_status1').set('html', status1[mymenuSlide1.open]);
  56. 	});
  57. 	};
  58.  
  59.  
  60.  
  61. 	if (czytaj_ciacho("ciastko2")=='1')  {
  62. 	var mymenuSlide2 = new Fx.Slide('zaw_slide2', {transition: 'sine:in',duration: 300, });
  63. 	$('slide2').addEvent('click', function(){  mymenuSlide2.toggle(); 
  64. 	});
  65. 	mymenuSlide2.addEvent('complete', function() {
  66. 	$('s_status2').set('html', status2[mymenuSlide2.open]);
  67. 	});
  68. 	}
  69.  
  70. 	if (czytaj_ciacho("ciastko2")=='2' | !czytaj_ciacho("ciastko2"))  {
  71. 	var mymenuSlide2 = new Fx.Slide('zaw_slide2', {transition: 'sine:in',duration: 300, }).hide();
  72. 	$('slide2').addEvent('click', function(){  mymenuSlide2.toggle(); 
  73. 	});
  74. 	mymenuSlide2.addEvent('complete', function() {
  75. 	$('s_status2').set('html', status2[mymenuSlide2.open]);
  76. 	});
  77. 	}
  78.  
  79. });
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.