Подтвердить что ты не робот

Ищете плагин JQuery, похожий на Accordian, но позволяющий открывать сразу несколько разделов

Я ищу элемент пользовательского интерфейса, аналогичный элементу, предлагаемому подключаемым модулем JQUERY Accordian, но позволяющий пользователю сразу открывать несколько разделов.

В документации есть следующие утверждения и предлагается альтернативный подход с фрагментом кода (см. ниже). Это здорово и все, и код, который они предоставляют, в основном работает, но я нахожу, что воссоздаю много вещей, встроенных в плагин, например, выключение классов и применение тем вручную в XHTML.

Мои вопросы:

  • Прежде, чем я заступлю слишком далеко ручной маршрут, кто-нибудь знает аналогичный плагин или мод для этого для открытия нескольких панелей однажды?

  • Есть ли еще одно общее имя для аккордеонный контроль, который позволяет нескольким открытым панелям, что я может использовать Google для других варианты?

Вот часть, на которую я ссылался ранее из документации, если это имеет значение.

ПРИМЕЧАНИЕ. Если вы хотите открыть несколько разделов сразу, не используйте аккордеон

Аккордеон не позволяет больше одна панель содержимого будет открыта на в то же время, и требуется много усилий для этого. Если вы ищете для виджета, который позволяет более одного панель содержимого будет открыта, не используйте это. Обычно это может быть написано с помощью несколько строк jQuery вместо этого, что-то например:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

Or animated:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});
4b9b3361

Ответ 1

Спасибо за все предложения, но я, наконец, нашел что-то свое, что делает именно то, что я искал. Я добавляю его как ответ для всех, кому что-то похожее.

Решение
Используя код и образец XHTML здесь вы можете расширить плагин JQuery Accordion, чтобы сразу открывать несколько панелей и сохранять тематику и другие функции, предоставляемые подключаемым модулем, без повторного создания стилей.

См. сайт, приведенный выше для полного примера, но вот мясо кода, необходимого для управления аккордеоном, позволяет открывать несколько панелей. Используйте тот же HTML для определения заголовков и содержимого, как описано в документации подключаемого модуля

    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
        .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
            .click(function() {
                $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                    .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().toggleClass("ui-accordion-content-active").toggle();
                return false;
            })
            .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
    })
    </script>

Ответ 2

Я сделал плагин jQuery, который имеет одинаковый внешний вид JQuery UI Accordion и может открывать все вкладки\разделы

вы можете найти его здесь

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

работает с той же разметкой

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

Код Javascript

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

UPDATE: плагин обновлен для поддержки стандартных вкладок по умолчанию

Ответ 3

Изменилось несколько вещей, предположительно, для 1.8.5.

Перемещение переключателя фиксировало проблему изменения состояния (нажмите "Показать", не нажимайте "Скрыть" , нажмите "Скрыть" , нажмите "Показать", нажмите "Скрыть" ). Классы несколько несогласованного шаблона jQuery и рендеринга пострадали

    $(".colapse").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
  .find("h3")       
          .addClass("ui-accordion-header ui-helper-reset ui-corner-all ui-state-default")
          .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
          .click(function() {
              $j(this).toggleClass("ui-accordion-header-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top").toggleClass("ui-state-active")
                          .toggleClass("ui-state-default")
                  .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                  .end().next().toggle().toggleClass("ui-accordion-content-active");
              return false;
          })
          .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

Ответ 4

Я изменил код, который я нашел в Интернете на прошлой неделе, ища аналогичное решение. Это предполагает, что каждый аккордеон является вложенным неупорядоченным списком. Для этого вы должны иметь уникальные идентификаторы для каждого из ваших аккордеонов. Вот пример:

HTML

<ul id="uniqueAccordion1" class="menu">
    <li class="noaccordion">
        <a href="#">Top Level 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Top Level 2</a>
        <ul>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>

JS

$(function() {
    // initialize admin menu
    loadNav();
});
function loadNav() {
    // initially show opened
    $.each($('ul.menu'), function(){
        $('#' + this.id + ' .expandfirst ul:first').show();
    });

    // watch for click
    $('ul.menu li > a').click(function() {
        var $this = $(this);
        var $parent = $this.parent();
        if ($parent.hasClass('noaccordion')) {
            return false;
        }
        var $checkElement = $this.next();
        if ($checkElement.is('ul')) {
            $checkElement.slideToggle('fast');
        }
        return false;
    });
}

Для поддержки этого вам понадобится ваш собственный CSS, но он позволяет использовать любое количество аккордеонов, а также позволяет отключить отдельный раздел от закрытия (если, например, вы используете его для навигации), добавив класс noaccordion к тегу LI основного уровня. Наконец, вы можете добавить класс expandfirst на основной уровень LI, чтобы автоматически открыть аккордеон для соответствующего элемента (ов) при загрузке страницы.

Ответ 5

Отредактированный код anasnakawa для тех , которым не нужен jQuery UI Accordion styling, и хочет, чтобы код был прост. (надеюсь, вы сочтете это полезным)

HTML:

<div id="multiOpenAccordion">
        <h3>tab 1</h3>
        <div>A lot of text</div>
        <h3>tab 2</h3>
        <div>A lot of thex 2</div>
</div>

JavaScript:

$(function(){
        $('#multiOpenAccordion').multiAccordion();
});

Измененный код:

(function($){
    $.fn.extend({ 
        multiAccordion: function(options) {
            var defaults = {};
            var options =  $.extend(defaults, options);
            return this.each(function() {
                var $this = $(this);
                var $h3 = $this.children('h3');
                var $div = $this.children('div');

                $h3.click(function(){
                    var $this = $(this);
                    var $div = $this.next();

                    if ($this.hasClass('closed')) {
                        $this.removeClass('closed').addClass('open');
                        $div.slideDown('fast');
                    } else {
                        $this.removeClass('open').addClass('closed');
                        $div.slideUp('fast');
                    }
                });
            });
        }
    });
})(jQuery);

Edit: Если вы используете обычную полосу прокрутки Malihu, тогда могут возникнуть проблемы с IE. IE понижает ошибку, говоря

Недопустимый аргумент, строка xx, символ xxx

Я удалил этот код из полоски прокрутки Malihu (который отвечает за прокрутку содержимого, превышающее сбой в 1000 пикселей). Это помогло.

$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}

Это дало мне настоящую головную боль.

Ответ 6

Этот фрагмент кода исправляет проблему угла (нижний угол заголовка должен исчезать при расширении и визе)

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
.find("h3")
        .addClass("ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default")
        .hover(function() { $(this).toggleClass("ui-state-hover"); })
        .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
        .click(function() {
            $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().slideToggle().toggleClass("ui-accordion-content-active");
            return false;
        })
        .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

Ответ 7

Лучшим решением является использование 1 аккордеона в каждом разделе, как сказал Мэтью Браун.

$( "#accordion1" ).accordion({ collapsible: true });
$( "#accordion2" ).accordion({ collapsible: true });
$( "#accordion3" ).accordion({ collapsible: true });

Ответ 8

Другим решением является плагин maccordion - https://github.com/Dattaya/Maccordion

Пример - http://jsfiddle.net/Dattaya/pTXju/

Он поддерживает параметры: отключен, активен, heightStyle, событие, заголовок, значки; эффекты, связанные с эффектом: эффект, параметры, ослабление, скорость.

Методы: уничтожить, отключить, включить, опцию, виджет, обновить.

События: создать, beforeActivate, активировать.

А также у вас есть возможность динамически добавлять/удалять вкладку. Документация - https://github.com/Dattaya/Maccordion/blob/master/README.md

Ответ 9

<ul class="accordion">
        <li id="one" class="files">
            <a href="#one">Admin Video</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/addvideo"><em>01</em>Add video</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo"><em>02</em>List Video</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/categorys"><em>03</em>Video Categories</a></li>                 
            </ul>
        </li>

        <li id="two" class="mail">
            <a  href="#two">Users</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/admin/listsubs"><em>01</em>Subscribers List</a></li>
                <li><a href="<?php echo base_url();?>"><em>02</em>User Video Suggestion</a></li>
            </ul>
        </li>


        <li id="three" class="cloud">
            <a class="active" href="#three">Background Image options</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/adminsettings"><em>01</em>Add</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminsettings/listbgs"><em>02</em>List</a></li>
            </ul>
        </li>
    </ul>

$(document).ready(function() {


    var accordion_head = $('.accordion > li > a'),
        accordion_body = $('.accordion li > .sub-menu');
    $.each($(".accordion > li > a"), function(){
        if($(this).attr('class') == 'active')
        {
            $(this).next().slideDown('normal');
        }           
    });



    // Open the first tab on load

    //accordion_head.first().addClass('active').next().slideDown('normal');

    // Click function

    accordion_head.on('click', function(event) {

        // Disable header links

        event.preventDefault();

        // Show and hide the tabs on click

        if ($(this).attr('class') != 'active'){
            accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        }

    });

});

надеется, что это поможет вам

Ответ 10

Другая возможность - использовать несколько экземпляров аккордеона (1 аккордеон на раздел). Я попытался использовать решение JohnFx выше, но создал проблемы с дизайном, которых у меня не было с аккордеоном по умолчанию. Когда я разделил свой 2-секционный сингл аккордеона на два отдельных аккордеона, я смог сохранить стиль просто отлично. Кроме того, вам не нужно иметь дело с внутренней реализацией css и html аккордеона.