Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][jQuery]Domyślny blok accordion
Forum PHP.pl > Forum > Przedszkole
evolucja
  1. $(document).ready(function() {
  2. $( "#leftmenu" ).accordion(
  3. { autoHeight: false },
  4. { animated: 'slide' },
  5. { header: 'h1' });
  6. });
  7. </script>
  8. <h1 class="akademia"></h1>
  9. <div id="akademia">
  10. <ul class="undermenu">
  11. <li><a href="">Aktualności</a></li>
  12. <li><a href="">Kadra trenerska</a></li>
  13. <li><a href="">Historia</a></li>
  14. <li><a href="">Galeria</a></li>
  15. </ul>
  16. </div>
  17. <h1 class="nabor"></h1>
  18. <div id="nabor">
  19. <ul class="undermenu">
  20. <li>Informacje</li>
  21. <li class="active">Regulamin</li>
  22. <li>Zgłoszenie</li>
  23. </ul>
  24. </div>

W jaki sposób zrobić tak, by otwarty blok accordion był ten, w którym znajduje się li z klasą 'active'? Wiem, że trzeba użyć instrukcji warunkowej z 'hasClass' a potem ustawić parametr 'active'. Nijak niestety nie potrafię skleić i wstawić ifa w dotychczasowy fragment..
nekomata
[JAVASCRIPT] pobierz, plaintext
  1. $( "li.active").parent().accordion(
[JAVASCRIPT] pobierz, plaintext

Linijka trzecia(edit musiałem zrobić bo napisałem że druga) , pisane z palca więc może być literówka ale wiesz czego szukać .
Możesz też bez "li" samą klasę wybrać
[JAVASCRIPT] pobierz, plaintext
  1. $( ".active").parent().accordion(
[JAVASCRIPT] pobierz, plaintext

A tak ogólnie rzecz biorąc czemu chcesz mieć , na podstawie li active a nie np.
[JAVASCRIPT] pobierz, plaintext
  1. $( "#nabor").accordion(// Nie wiem jak dziala ten plugin..
  2. //jesli musi byc targetowany na UL to patrz nizej
[JAVASCRIPT] pobierz, plaintext
Efekt będzie taki sam bo w tym div'ie niema nic po za listą . Albo
[JAVASCRIPT] pobierz, plaintext
  1. $( "#nabor").children().accordion(
[JAVASCRIPT] pobierz, plaintext
Albo
[JAVASCRIPT] pobierz, plaintext
  1. $( "#nabor").children("ul").accordion(
[JAVASCRIPT] pobierz, plaintext
evolucja
Dzięki za pomoc. Niestety to nie zadziała. Accordion musi obejmować wszystkie ul i wszystkie h1. Zerknij sobie tutaj: http://jqueryui.com/demos/accordion/ + Options -> Active to zobaczysz jak to działa. Potrzeba zrobić instrukcję warunkową. W moim mniemaniu tak to powinno wyglądać:
Kod
<script>
    $(document).ready(function() {
    $( "#leftmenu" ).accordion(
    { autoHeight: false },
    { animated: 'slide' },
    
        if((h1.academia).hasClass(active)) { { active: 0 }); }
        elseif((h1.nabor).hasClass(active)) { { active: 1 }); }

    { header: 'h1' });    
    });
    </script>

jak tylko napisać i wpleść tą instrukcję poprawnie?
nekomata
Dzieki za przykład , teraz już wiem
[JAVASCRIPT] pobierz, plaintext
  1. $( "#accordion" ).accordion({ active: 0 });
[JAVASCRIPT] pobierz, plaintext
Tym startujesz a zamiast 0 musisz wstawić numer który ma być otwarty ( 0 to jest pierwszy , 1 to jest drugi itd...) niema tam opisanego rozwiązania z numerem klasy.. tyle ci mogę pomóc. BTW : nie wydaję mi się żeby ustawiało klasę (active) ... ustawia option na mój gust.

EDIT :
Głupi jestem że na to niewpadłem...
[JAVASCRIPT] pobierz, plaintext
  1. $( ".active" ).click();
[JAVASCRIPT] pobierz, plaintext
Jeśli kliknięcie na li z active otwierało... to już masz otwarte po załadowaniu strony biggrin.gif (wklej pod wywołaniem accordiona , nie w środku)
evolucja
Kod
$( ".active" ).click();

Działa, jednak przy ładowaniu strony widać efekt zmiany zakładki z pierwszej na drugą. Nieciekawie to wygląda.

Z tego co widzę można zmieniać parametry accordiona poprzez funkcję:
Kod
.accordion( "option" , optionName , [value] )

Niestety przy tym też występuje ten efekt zmiany zakładki.
Kod
    <script>
    $(document).ready(function() {
    $( "#leftmenu" )
        .accordion({
     autoHeight: false ,
    
     animated: 'slide',
     header: 'h1' });
    
    $( "#leftmenu" ).accordion( "option" , "active" , 1 )
    });    
    </script>

Czy dało by się aktywować accordiona dopiero po zmianie tego parametru? Musi być jakaś opcja by ustawić tą aktywną zakładkę smile.gif
nekomata
A no.. tak teraz spojrzałem.. przecież to takie proste...
[JAVASCRIPT] pobierz, plaintext
  1. $(function() {
  2. $( "#leftmenu" ).accordion({
  3. autoHeight: false ,
  4. animated: 'slide',
  5. header: 'h1' ,
  6. active : 1});
[JAVASCRIPT] pobierz, plaintext
evolucja
No i co mi to daje? smile.gif Ustawia domyślnie aktywny blok numer 1. Ja potrzebuję warunku, który sprawdzi czy występuje klasa .active i jeśli tak to odpowiednio wpisze active : 0 lub 1.

Już teraz dziękuję ci za twoją pomoc.

Edit:
poradziłem sobie w ten sposó:

[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. $(document).ready(function() {
  3. if($( "div#nabor").children().children().hasClass('active')) {
  4. $( "#leftmenu" )
  5. .accordion({
  6. autoHeight: false ,
  7. active : 1,
  8. animated: 'slide',
  9. header: 'h1' });
  10. } else {
  11. $( "#leftmenu" )
  12. .accordion({
  13. autoHeight: false ,
  14. active : 0,
  15. animated: 'slide',
  16. header: 'h1' });
  17. }
  18. });
  19. </script>
[JAVASCRIPT] pobierz, plaintext


Zapewne jest możliwość zrobienia tego prościej. Gdyby ktoś miał jakiś pomysł proszę pisać smile.gif
nekomata
[JAVASCRIPT] pobierz, plaintext
  1. var aktywny;
  2. if($( "div#nabor").children().children().hasClass('active')){aktywny = 1;}
  3. else{aktywny = 0;}
  4. $( "#leftmenu" ).accordion({
  5. autoHeight: false ,
  6. active : aktywny,
  7. animated: 'slide',
  8. header: 'h1' });
  9.  
[JAVASCRIPT] pobierz, plaintext
Takie uproszczenie powinno zadziałać ...
evolucja
Dziękuję. 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.