Добавить новый раздел к аккордеону пользовательского интерфейса Jquery при нажатии на ссылку ...? (Кодовый Воспламенитель) - PullRequest
Новая
       0

Добавить новый раздел к аккордеону пользовательского интерфейса Jquery при нажатии на ссылку ...? (Кодовый Воспламенитель)

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

Я хотел бы добавить новый раздел в аккордеон JQery UI, когда кто-то нажимает на ссылку, либо на той же странице, либо на другой странице. Я посмотрел на функцию append (), но содержимое, которое я собирал, содержало бы как PHP, так и HTML, так что его нужно было бы проанализировать.

Ссылка, по которой пользователь будет щелкать, ссылается на запись базы данных, например, для извлечения. / site / index / record / 3 (я создаю в Code Igniter).

Каков наилучший способ сделать это?

Я думал об использовании prependTo (если это правильно), а затем о доставке контента через ajax? Не уверен, как это будет работать, переходя с другой страницы.

Будем благодарны за любые идеи, предложения, указатели или комментарии, так как я не знаю, как это сделать.

Вот аккордеон у меня есть: 

$(function() { // jquery ui accordion with mods for sorting
    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); // move the active panel to the top of the accordion
              }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

        $(".new_accordian").click(function( event ) {
        $('#ccaccordion').prepend("<div><h3><a href=\"#\">Section X</a></h3><div><p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p></div></div>");
    });

});

Спасибо!

1 Ответ

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

Я выполнил это, изменив HTML-код, добавив новый раздел Accordion, затем вызвав что-то вроде следующего: 

$("#days").accordion('destroy').accordion({
    autoHeight: false
    ,navigation: true
    ,collapsible: true
    ,active: false
});

Где <div id="days">...</div> - контейнер, содержащий все разделы аккордеона.По сути, вы должны уничтожить, а затем повторно инициализировать аккордеон при добавлении новых элементов.

Таким образом, вы получите новый раздел через AJAX, добавите () HTML-код в контейнер аккордеона и затем создадите аккордеон.

...