JQuery UI Auto-Sortable Accordian - это возможно? - PullRequest
Новая
       1

JQuery UI Auto-Sortable Accordian - это возможно?

0 голосов
/ 29 сентября 2010

Я хочу иметь нечто похожее на сортируемый аккордеон в пользовательском интерфейсе JQuery, который автоматически сортирует себя, т.е. активная панель аккордеона (открытая - последняя нажатая) автоматически перемещается в верхнюю часть аккордеона.

Есть идеи?

Вот ссылка на страницу пользовательского интерфейса JQ: http://jqueryui.com/demos/accordion/#sortable

Спасибо!

Вот мой код (в ответ Томасу): 

$(function() {
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            "option",
            "change",
            function(event, ui){
              ui.newHeader.parent().prependTo(this);
            }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

});

Ответы [ 2 ]

2 голосов
/ 20 ноября 2011

Я понимаю, что это более старая тема, но я обнаружил, что изменение 'change' на 'changestart' приводит к тому, что слайд происходит после сортировки, что, на мой взгляд, выглядит намного лучше.

Если вы предпочитаете, чтобы слайд проходил после сортировки, вы можете изменить это: 

$('#accordion')
    .accordion(
        'option',
        'change',
    function(event, ui){
        ui.newHeader.parent().prependTo(this);
    }
);

К этому: 

$('#accordion')
    .accordion(
        'option',
        'changestart',
    function(event, ui){
         ui.newHeader.parent().prependTo(this);
    }
);

Добавьте это в демонстрационную программу JQuery UI Accordion, и при щелчке по заголовку A. сразу же отсортируется до самого верха, а B. откроется.

1 голос
/ 29 сентября 2010

Добавьте этот код в демонстрационный пример: 

$('#accordion')
  .accordion(
    'option',
    'change',
    function(event, ui){
      ui.newHeader.parent().prependTo(this);
    }
  );

Редактировать:

Изменение вашего кода: 

$(function() {
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            change:
              function(event, ui){
                ui.newHeader.parent().prependTo(this);
              }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

});
...