Akordeonik mojej produkcji zrobiny przy użyciu biblioteki jQuery
Długi czas się zastanawiałem po co jest tyle kodu w gotowych akordeonach "pluginach" do jquery. Kiedy końcowy użytkownik obsługujący sklep czy cms-a i tak zawinie się przy dodawaniu div-ów w div-ach i do tego z odpowiednimi klasami ... obsługowa masakra
Załoażenia - ma być semantyczne // div w divie nie jest tak samo semantyczny jak tabelka do układu strony :) - ma być proste w obsłudze przy podtawowej znajomośći czystego html-a lub edytora WysiWyg <dl> <dt>Tytół definicji 1</dt> <dd>Opis definicji 1</dd> <dt>Tytół definicji 2</dt> <dd>Opis definicji 2a</dd> <dd>Opis definicji 2b</dd> </dl>
- ma obsługiwać kilka definicji Tytół 1 - Zamek Definicja 1a - ten w drzwiach Definicja 1b - ten budynek
- ma być zrobione na jQuery (bo i tak już jeej używam) kilkoma liniami kodu bez zbędnych pluginów ale zawierać choćby najprostszą animację - bo kowalski lubi efekt :)
- ma działać dobrze i walidować się po wyłączeniu JS
Wyszło tak:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { // tutaj możemy normalnie używać $
$('#pageDescription dd').not("dd:first").hide(); // ukrywamy wszystkie definicje poza pierwszą
$('#pageDescription dt').not("dt:first").prepend('<b>+</b>'); // dodajemy plus do zamkniętych definicji $('#pageDescription dt:first').prepend('<b>-</b>'); // dodajemy minus do otwartej pierwszej definicji
$('#pageDescription dt').css({"cursor": "pointer"}).click(function(){ $(this).siblings('dt').find("b").html("+"); // u rodzeństwa tytółów definicji kliknietego tytółu szukamy pogrubień <b> i dodajemy plus i dodajemy im plusa $(this).find("b").html("-"); // klikniety tytół definicji szukamy <b> i dodajemy dodajemy minusa bo jest otwarty $('#page dd').slideUp(); // zwijamy wszystkie definicje $(this).nextUntil("dt").slideDown(); // rozwijamy te definicje które występują po klikniętym tytóle definicji return false; // przy animacjach radzę stosować }); $('#pageDescription dt').css({"position":"relative"}).find("b:first").css({"position":"absolute ","right":"10px","top":"3px","width":"10px","textA lign": "center"}); // stylizację można by zrobić i w css bezpośrednio
}); </script>
Zachęcam do oceniania i dywagazji co można by było zrobić prosciej etc
Tu przykład w akcji : http://www.kamienicawarszawska.pl/?finansowanie-kredyty,16
W finalnym prjekcie lepiej pobrać jquery i zapisać w katalogu core Pamiętajmy żeby ostylizować w CSS już samą listę definicji ja użyłem brązowych beleczek
@marcincook Na akordeonie zagrałem :) Jet jedno "ale". Chyba litebox gryzie się z jquery (pół ekranu widzę za przesłoną) Być może pomoże dodanie var $$ = jQuery.noConflict(); za $(document).ready(function(){
czyli obiekty $$ z Prototype - hmm jest to jakiś pomysł, ja po prostu zawsze wymieniam Lightboxa na jakiś jquery bo używam jQuery http://keyk.jupe.pl/elwoz/?akordeon,28
Ale spróbuje zrobić "CROSS JS Library Plugin" :) dla tego pluginu, jak ma to być plugin to niech działa na QC domyślnym
Poszukaj taką linię (jeszcze przed wszystkimi skryptami js): <meta http-equiv="Content-Style-Type" content="text/css" />
i za nią wklej:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>; <script type="text/javascript"> jQuery(document).ready(function($) { // tutaj możemy normalnie używać $
var $$ = jQuery.noConflict(); $('#pageDescription dt').not("dt:first").nextUntil('dt').hide(); // ukrywamy wszystkie definicje poza pierwszą
$('#pageDescription dt').not("dt:first").prepend('<b>+</b>'); // dodajemy plus do zamkniętych definicji $('#pageDescription dt:first').prepend('<b>-</b>'); // dodajemy minus do otwartej pierwszej definicji
$('#pageDescription dt').css({"cursor": "pointer"}).click(function(){ $(this).siblings('dt').find("b").html("+"); // u rodzeństwa tytółów definicji kliknietego tytółu szukamy <b> i dodajemy plus $(this).find("b").html("-"); // klikniety tytół definicji szukamy <b> i dodajemy minusa bo jest otwarty $('#page dd').slideUp(); // zwijamy wszystkie definicje $(this).nextUntil("dt").slideDown(); // rozwijamy te definicje które występują po klikniętym tytóle definicji return false; // przy animacjach radzę stosować }); $('#pageDescription dt').find("b:first").css({"position":"absolute ","right":"10px","top":"3px","width":"10px","textA lign": "center"}); // stylizację można by zrobić i w css bezpośrednio
