Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Prototype] Menu :)
Forum PHP.pl > Inne > Oceny
phpion
Witam smile.gif
Chciałbym dać Wam do oceny moje menu wykonane z użyciem Prototype.

http://phpworkstation.com/prototype/menu.html

Natchnieniem do jego wykonania było to menu napisane w jQuery. Jak widać mój kod jest nieco dłuższy winksmiley.jpg
Jest to mój pierwszy kontakt z Prototype więc prosiłbym o wytknięcie wszelkich błędów tudzież nakierowanie co można było rozwiązać inaczej, lepiej. W sumie kod dostępny jest bezpośrednio w pliku jednak pozwolę go sobie wkleić również tutaj:
  1. var currentDd = null;
  2.  
  3. var SlideMenu = Class.create();
  4. SlideMenu.prototype = {
  5. initialize: function(id) {
  6. this.id = id;
  7. this.elements = new Array();
  8.  
  9. var childs = $(this.id).childElements();
  10. var childsLength = childs.length;
  11.  
  12. var dt;
  13. var dd;
  14.  
  15. for (var i=0; i<childsLength; i++) {
  16. var child = childs[i];
  17.  
  18. switch (child.tagName.toLowerCase()) {
  19. case "dt":
  20. dt = (child.className != "empty") ? new SlideMenu_Dt(child) : null;
  21.  
  22. break;
  23. case "dd":
  24. dd = new SlideMenu_Dd(child);
  25. child.hide();
  26.  
  27. if (dt instanceof SlideMenu_Dt && dd instanceof SlideMenu_Dd) {
  28. this.elements.push(new SlideMenu_Pair(dt, dd));
  29.  
  30. dt = null;
  31. dd = null;
  32. }
  33.  
  34. break;
  35. }
  36. }
  37. }
  38. }
  39.  
  40. var SlideMenu_Pair = Class.create();
  41. SlideMenu_Pair.prototype = {
  42. initialize: function(dt, dd) {
  43. this.dt = dt;
  44. this.dd = dd;
  45.  
  46. dt.element.onclick = function() {
  47. if (dd != currentDd) {
  48. if (!dd.isOpened) {
  49. dd.open();
  50. }
  51. else {
  52. dd.close();
  53. }
  54.  
  55. currentDd = dd;
  56. }
  57. }
  58. }
  59. }
  60.  
  61. var SlideMenu_Dt = Class.create();
  62. SlideMenu_Dt.prototype = {
  63. initialize: function(element) {
  64. this.element = element;
  65. }
  66. }
  67.  
  68. var SlideMenu_Dd = Class.create();
  69. SlideMenu_Dd.prototype = {
  70. initialize: function(element) {
  71. this.element = element;
  72. this.isOpened = false;
  73. },
  74.  
  75. open: function() {
  76. if (currentDd != null) {
  77. currentDd.close();
  78. }
  79.  
  80. if (!this.isOpened) {
  81. new Effect.SlideDown(this.element, {duration:0.1});
  82. this.isOpened = true;
  83. }
  84. },
  85.  
  86. close: function() {
  87. if (this.isOpened) {
  88. new Effect.SlideUp(this.element, {duration:0.1});
  89. this.isOpened = false;
  90. }
  91. }
  92. }
  93.  
  94. function initMenu() {
  95. var menu = new SlideMenu("root");
  96. }
  97.  
  98.  
  99. Event.observe(window, "load", initMenu, false);

Równocześnie prosiłbym o zgłaszanie ewentualnych problemów w działaniu (testowałem na Operze i FireFoxie).

Pozdrawiam: pion
smile.gif
parzol
Super!

Naprawde swietne menu. Znacznie lepsze niz oryginal (który ma pewne problemy pod IE u mnie).

guitar.gif
phpion
Hehe, dzięki Parzi smile.gif
axel_pl
jak dla mnie bomba
skowron-line
@phpion.com dobra robota ale mam jedno ale.. zwijanie moglo by byc deczko wolniejsze
sf
Trochę za bardzo skacze.. tzn. inaczej powinna być opcja umożliwiająca określenie jak szybko się rozwija / zwija.
AxZx
no i nie ma opcji ze jak klikniesz w rozwinieta pozycje menu zostanie ona zwinieta.
c3zi
Fajnie nawet wyglada. W mootools 4 linijki ;-)
phpion
Cytat(axel_pl @ 22.11.2007, 01:58:33 ) *
jak dla mnie bomba

Cieszę się smile.gif


Cytat(skowron-line @ 22.11.2007, 11:14:38 ) *
@phpion.com dobra robota ale mam jedno ale.. zwijanie moglo by byc deczko wolniejsze

Akurat dla mojego zastosowania (nie jako menu z krwi i kości) jest dobre. Dalsze rozważania -> patrz punkt niżej.


Cytat(sf @ 22.11.2007, 12:01:45 ) *
Trochę za bardzo skacze.. tzn. inaczej powinna być opcja umożliwiająca określenie jak szybko się rozwija / zwija.

Dodam konfig do ustalania prędkości i może innych dupereli. Co do skakania - nie zaobserwowałem.


Cytat(AxZx @ 22.11.2007, 13:02:23 ) *
no i nie ma opcji ze jak klikniesz w rozwinieta pozycje menu zostanie ona zwinieta.

Wyłączenie możliwości zwinięcia aktualnej opcji również była mi potrzebna; po niewielkich zmianach można to "wyłączyć".


Cytat(c3zi @ 22.11.2007, 13:04:00 ) *
Fajnie nawet wyglada. W mootools 4 linijki ;-)

Dzięki smile.gif Co do linku: pod IE6 wogóle mi się nie ładuje (może wina serwera) :/ Porównując mój kod z tym z jQuery różnica w ilości linijek jest zasadnicza smile.gif hehe

Z ciekawostek: menu działa poprawnie na Operze, FireFoxie oraz IE od wersji 5.55 (szaleństwo! smile.gif )
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.