Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript]Fx.Slide przeróbka, Jak zrobić zeby działało na wielu divach
RafaelX
post 21.01.2009, 11:36:11
Post #1





Grupa: Zarejestrowani
Postów: 144
Pomógł: 28
Dołączył: 2.01.2009

Ostrzeżenie: (0%)
-----

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.

Ten post edytował RafaelX 21.01.2009, 11:36:54
Go to the top of the page
+Quote Post
gebp
post 21.01.2009, 13:38:23
Post #2





Grupa: Zarejestrowani
Postów: 180
Pomógł: 6
Dołączył: 10.04.2006

Ostrzeżenie: (0%)
-----

Zaglądnij jeszcze TUTAJ. Co prawda jest klasa AJAX'a ale posiada kilka "bajerów".
Go to the top of the page
+Quote Post
RafaelX
post 21.01.2009, 13:49:03
Post #3





Grupa: Zarejestrowani
Postów: 144
Pomógł: 28
Dołączył: 2.01.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
skowron-line
post 21.01.2009, 13:50:28
Post #4





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

Ostrzeżenie: (0%)
-----

http://www.consideropen.com/blog/2008/12/3...day-23-fxslide/
no i
http://www.consideropen.com/blog/2008/08/3...to-the-library/


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
RafaelX
post 21.01.2009, 23:00:55
Post #5





Grupa: Zarejestrowani
Postów: 144
Pomógł: 28
Dołączył: 2.01.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.06.2025 - 02:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn