Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [Prototype] Menu :)
phpion
post
Post #1





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza




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
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 22.08.2025 - 08:06