Strony mobilne i responsywne wprowadziły nową jakość do Internetu. Serfowanie po stronach stało się łatwe i przyjemne dzięki responsywnym nawigacjom i układom szablonów automatycznie dopasowującym się do danej rozdzielczości ekranu (telefonu lub tabletu). Niestety są elementy, które nadal sprawiają problem lub nie można ich dostosować w sposób jaki byśmy chcieli za pomocą zwykłego HTMLa, CSS np: zakładki. Jednym z lepszych rozwiązań jest ich zmiana na akordeon za pomocą jQuery. Rozwiązanie, które zaprezentuję dotyczy widżetów Bootstrapa. Chyba każdy programista o nich słyszał 😉 A jak nie to zachęcam odwiedzić:
https://getbootstrap.com/docs/4.0/components/navs/#tabs
https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
Poniżej skrypt odpowiedzialny za transformację zakładek w akordeon. Zapisz go w osobnym pliku accordion.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* accordion.js */ function getAccordion(element_id,screen) { $(window).resize(function () { location.reload(); }); if ($(window).width() < screen) { var concat = ''; obj_tabs = $( element_id + " li" ).toArray(); obj_cont = $( ".tab-content .tab-pane" ).toArray(); jQuery.each( obj_tabs, function( n, val ) { concat += '<div id="' + n + '" class="panel panel-default">'; concat += '<div class="panel-heading" role="tab" id="heading' + n + '">'; concat += '<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse' + n + '" aria-expanded="false" aria-controls="collapse' + n + '">' + val.innerText + '</a></h4>'; concat += '</div>'; concat += '<div id="collapse' + n + '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading' + n + '">'; concat += '<div class="panel-body">' + obj_cont[n].innerHTML + '</div>'; concat += '</div>'; concat += '</div>'; }); $("#accordion").html(concat); $("#accordion").find('.panel-collapse:first').addClass("in"); $("#accordion").find('.panel-title a:first').attr("aria-expanded","true"); $(element_id).remove(); $(".tab-content").remove(); } } |
Funkcja getAccordion(element_id, screen) przyjmuje dwie wartości:
- element_id – identyfikator listy ul (<ul id=”element_id”></ul>); w naszym przykładzie będzie to „tabs” (<ul id=”tabs”></ul>)
- screen – rozdzielczość ekranu poniżej której zakładki zmienią się automatycznie w akordeon
Do strony dołącz biblioteki: jQuery, Bootstrap oraz accordion.js według przygotowanego przeze mnie wzoru:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Zmiana Bootstrap Tabs na Accordion </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="accordion.js"></script> </head> <body> <!-- Bootstrap Tabs --> <ul id="tabs" class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#t1">Tab 1</a></li> <li><a data-toggle="tab" href="#t2">Tabs 2</a></li> <li><a data-toggle="tab" href="#t3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="t1" class="tab-pane fade in active"> Content 1 </div> <div id="t2" class="tab-pane fade"> Content 2 </div> <div id="t3" class="tab-pane fade"> Content 3 </div> </div> <!-- /Bootstrap Tabs --> <!-- Bootstrap Accordion --> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"></div> <!-- /Bootstrap Accordion --> <script type="text/javascript"> $(document).ready(function(){ getAccordion("#tabs",1000); }); </script> </body> </html> |
Przetestuj działanie na tablecie lub telefonie lub zmniejsz okno przeglądarki poniżej zadanej wartości screen. Oczywiście wartość tą możesz zmieniać według uznania.
