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

Я хочу иметь что-то похожее на сортируемый аккордеон в пользовательском интерфейсе 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;
            }
        });

});

jquery jquery-ui jquery-ui-accordion
person Robimp    schedule 29.09.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

$('#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;
            }
        });

});
person Thomas    schedule 29.09.2010
comment
Привет Томас! Спасибо за ответ. Я обновил свой пост кодом, который у меня есть, не уверен, что это правильно - мой js не так хорош. Я получаю эту ошибку в консоли Firebug «отсутствует: после идентификатора свойства [Break on this error] function (event, ui) {\ n», и аккордеон сломан? - person Robimp; 29.09.2010
comment
Не уверен, что вы получите уведомление о моем отредактированном ответе, поэтому я публикую этот комментарий, чтобы уведомить вас. - person Thomas; 29.09.2010
comment
Красивый! Теперь это отлично работает, и спасибо за уведомление, я рвал на себе волосы, пытаясь понять это. Я действительно должен стать лучше в javascript. - person Robimp; 29.09.2010

arrow_upward
2
arrow_downward

Я понимаю, что это старая тема, но я обнаружил, что изменение «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. откроется.

person ifthatdoesntdoit    schedule 19.11.2011