it-swarm.dev

jQuery UI Accordion Rozbalit/Sbalit vše

Používám jQuery UI akordeon (který neumožňuje více než jednu položku otevřít najednou) na projektu. Použití harmoniky je vhodné, protože obvykle do chci, aby byl vždy otevřen pouze jeden panel.

Musím však nabídnout odkaz "Rozbalit vše", který se po kliknutí přepne na "Sbalit vše". Nechci si zapisovat téměř identické funkce akordeonu kolem tohoto jednoho požadavku, takže bych chtěl, aby některé JS dosáhly tohoto cíle, zatímco používáte komponentu Accordion.

Otázka: Jaký JavaScript/jQuery je nutný k dosažení tohoto cíle, zatímco stále používáte komponentu jQuery UI "Accordion" pro napájení standardní funkce?

Zde je fiddle: http://jsfiddle.net/alecrust/a6Cu7/

32
AlecRust

Nakonec jsem zjistil, že je to nejlepší řešení s ohledem na požadavky:

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});
5
AlecRust

Jak bylo řečeno v jQuery UI fórech, neměli byste na to používat harmonie. 

Pokud chcete něco, co vypadá a funguje jako harmonika, je to v pořádku. Použijte jejich třídy, abyste je vytvořili, a implementujte jakékoli funkce, které potřebujete. Pak přidáním tlačítka otevřete nebo zavřete všechny je docela jednoduché. Příklad

HTML

Používáním jquery-ui tříd udržujeme naše akordeony jako „skutečné“ harmoniky.

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        Content 1
    </div>
</div>​

Roll vlastní akordeony

Většinou chceme, aby hlavičky akordeonů přepínaly stav následujícího sourozence, což je oblast obsahu. Přidali jsme také dvě vlastní události "show" a "hide", které se připojíme později.

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');

    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

Rozbalit/Sbalit vše

Použijeme-li příznak boolean isAllOpen k označení, kdy bylo tlačítko změněno, mohlo by to být stejně snadno třída nebo stavová proměnná ve větším rámci pluginu.

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

Přepněte tlačítko, když se zobrazí "vše otevřeno"

Díky našim vlastním "show" a "skrýt" událostem máme něco, co můžeme poslouchat, když se panely mění. Jediný zvláštní případ je "jsou všechny otevřené", pokud ano, tlačítko by mělo být "Sbalit vše", pokud ne, mělo by být "Rozbalit vše".

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});​

Upravit pro komentář: Udržování "1 otevřeného panelu pouze", pokud nestisknete tlačítko "Rozbalit vše", je ve skutečnosti mnohem jednodušší. Příklad

50
Sinetheta

Toto mé řešení:

Práce v reálném projektu.

   $(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

18
bigvax

Mnohé z nich se zdají být příliš komplikované. Dosáhl jsem toho, co jsem chtěl:

$(".ui-accordion-content").show();

JSFiddle

16
Charles Clayton

Nevěřím, že to můžete udělat s akordeonem, protože je speciálně navržen tak, aby zachoval vlastnost, která bude otevřena maximálně na jednu položku. Nicméně, i když říkáte, že nechcete znovu implementovat akordeon, můžete být nad odhadem složitosti. 

Zvažte následující scénář, kde máte svislý svazek prvků, 

++++++++++++++++++++
+     Header 1     +
++++++++++++++++++++
+                  +
+      Item 1      +
+                  +
++++++++++++++++++++
+     Header 2     +
++++++++++++++++++++
+                  +
+      Item 2      +
+                  +
++++++++++++++++++++

Pokud jste líní, mohli byste to sestavit pomocí tabulky, jinak by vhodně fungující DIVs také fungovaly. 

Každý z bloků položek může mít třídu itemBlock. Kliknutí na záhlaví způsobí skrytí všech prvků třídy itemBlock ($(".itemBlock").hide()). Poté můžete pomocí funkce jquery slideDown() rozbalit položku pod záhlavím. Teď už jste do značné míry implementovali akordeon. 

Chcete-li rozbalit všechny položky, stačí použít $(".itemBlock").show() nebo chcete-li animovaný soubor $(".itemBlock").slideDown(500). Chcete-li skrýt všechny položky, použijte pouze $(".itemBlock").hide().

3
PhilDin

Zde je kód podle Sinetheta převeden na plugin jQuery: Uložte níže kód do souboru js. 

$.fn.collapsible = function() {
    $(this).addClass("ui-accordion ui-widget ui-helper-reset");
    var headers = $(this).children("h3");
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
    headers.click(function() {
        var header = $(this);
        var panel = $(this).next();
        var isOpen = panel.is(":visible");
        if(isOpen)  {
            panel.slideUp("fast", function() {
                panel.hide();
                header.removeClass("ui-state-active")
                    .addClass("ui-state-default")
                    .children("span").removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-triangle-1-e");
          });
        }
        else {
            panel.slideDown("fast", function() {
                panel.show();
                header.removeClass("ui-state-default")
                    .addClass("ui-state-active")
                    .children("span").removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-triangle-1-s");
          });
        }
    });
}; 

Odkazujte na stránku uživatelského rozhraní a volejte podobně jako volání jQuery accordian: 

$("#accordion").collapsible(); 

Vypadá čistší a vyhýbá se všem třídám, které mají být přidány do značek.

2
Ullas Antony

zkuste tohle jquery-multi-open-accordion , může vám pomoci

1
rajesh kakawat

I druhý bigvax komentář dříve, ale musíte se ujistit, že přidáte 

        jQuery("#jQueryUIAccordion").({ active: false,
                              collapsible: true });

jinak nebudete schopni otevřít první akordeon po jejich zhroucení. 

    $('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
   }
1
craig_nelson

Našel jsem AlecRust řešení docela užitečné, ale přidám něco vyřešit jeden problém: Když kliknete na jeden akordeon rozbalit a pak klikněte na tlačítko rozbalit, budou všechny otevřeny. Pokud však znovu klepnete na tlačítko, které se má zhroutit, rozbalí se jeden akordeon dříve, než se zhroutí.

Použil jsem imageButton, ale můžete použít i logiku na tlačítka.

/*** Expand all ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();

    return false;
});

/*** Collapse all ***/
$(".collapseAll").click(function (event) {
    $('.accordion').accordion({
        collapsible: true,
        active: false
    });

    $('.accordion .ui-accordion-header').next().slideUp();

    return false;
});

Pokud máte akordeony uvnitř harmoniky a chcete rozšířit vše pouze na této druhé úrovni, můžete přidat dotaz:

/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();

    return false;
});
0
Freelex

Použil jsem příklad pro Taifun, Upravil jsem tak, aby umožňoval expanzi a kolaps.

... // připojte rozbalit/sbalit vše

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});
0
NCR

Můžete vyzkoušet tento lehký malý plugin.

To vám umožní přizpůsobit jej podle vašich požadavků. Bude mít funkci Rozbalit/Sbalit.

URL: _ ​​http://accordion-cd.blogspot.com/

0
Dharam Mali
Yes, it is possible. Put all div in separate accordion class as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

        $(function () {
            $("input[type=submit], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
            $("#tabs").tabs();
            $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0



            });
        });

function expandAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0

            });

            return false;   
}

function collapseAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: false



            });
            return false;
}
</script>



<div class="accordion">
  <h3>Toggle 1</h3>
  <div >
    <p>text1.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 2</h3>
  <div >
    <p>text2.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 3</h3>
  <div >
    <p>text3.</p>
  </div>
</div>
0
Manish Ojha