Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Nawigacja, Czyli jak to zapisać i zoptymalizować?
Twist
post
Post #1





Grupa: Zarejestrowani
Postów: 174
Pomógł: 11
Dołączył: 12.10.2008
Skąd: Dublin

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


Strona i efekt jaki chce osiagnąć:
http://starodaj.eu

obecnie robiłem to w taki sposób

Link do źródła JS

Jednak od razu widać, że większość kodu powtarza się. Dlatego chciałbym zrobić jedną funkcję, która na podstawie ID kliknietej pozycji, wykona odpowiednie przesuniecia i nadanie klas.
Mam jednak problem "jak to zapisać?"i czy "tak jest dobrze"?

Mój mały algorytm:

  1. 1. Po klikniecu w #primary-nav li a
  2. - usun wsyztskie klasy active z #primary-nav li a
  3. - usun wsyztskie klasy active z #menu-subs div
  4. - nadaj active na biezacy element
  5. - nadaj active na element menu-sub + id
  6. - przesun content o id*1042px
  7. - przypisz do height odpowienia wartosc swithcem i ustaw taka wysokosc #bg
  8.  
  9. 2. po kliknieciu w h1 a
  10. - nadaj klasy active na wszytskie #primary-nav li a
  11. - usun wsyztskie klasy active z #menu-subs div
  12. - przesun content do left=0px


a oto mój pseudo kod:

1.

  1. $(document).ready(){
  2. $("#primary-nav li a").click(function(){
  3. var id= parseInt($(this).attr('id'));
  4. $("#primary-nav li a").each(function(){
  5. $(this).removeClass("active");
  6. });
  7. $("#menu-subs div").each(function(){
  8. $(this).removeClass("active");
  9. });
  10. ${this}.addClass("acive");
  11. $("menu-sub" + id).addClass("active");
  12. $("div#content-inside").animate({left:-1*(id*1042px)},500);
  13. var SetHeight = '1';
  14. switch(id)
  15. {
  16. case 1:
  17. setHeight = '100%';
  18. break;
  19. case 2:
  20. setHeight = '300px';
  21. break;
  22. default:
  23. setHeight = '300px';
  24. }
  25. $("div#bg").animate({height:setHeight}, 500);
  26. };
  27. }



2.

  1. $(document).ready(){
  2. $("h1 a").click(function(){
  3.  
  4. $("#primary-nav li a").each(function(){
  5. $(this).addeClass("active");
  6. });
  7. $("#menu-subs div").each(function(){
  8. $(this).removeClass("active");
  9. });
  10.  
  11. $("div#content-inside").animate({left:'0px')},500);
  12.  
  13. $("div#bg").animate({height:'100%'}, 500);
  14. };
  15. }


Go to the top of the page
+Quote Post

Posty w temacie
- Twist   [JavaScript]Nawigacja   24.10.2011, 18:27:34


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

 



RSS Aktualny czas: 25.08.2025 - 14:48