JQuery UI - Открыть Аккордеон во Вкладках с внешней ссылкой

0

Я хотел бы открыть Аккордеон в одной вкладке для каждой внешней ссылки. Например: www.demosite.com/site#tab1&2 должен открыть первую вкладку и внутри вкладки второй аккордеон.

Пока я открываю конкретную вкладку со следующим кодом:

$( "#tabs" ).tabs({
  collapsible: true,
  select: function(event, ui) {
    window.location.hash = ui.tab.hash;
  }
});

Для открытия Accordion я thin я должен использовать активную функцию jQuery UI Accordion, но я не знаю, как я могу использовать оба.

Может кто-нибудь мне помочь?

http://jsfiddle.net/bMeLL

  • 0
    Внешняя ссылка с того же домена. Речь идет о сшивке двух сайтов
  • 0
    О, неправильно понял вопрос. Итак, вы хотите какой-то синтаксис, который открывает вкладку и аккордеон внутри своего контента? Так # tab1 & 2 = открыть tab1 и, в разделе контента, аккордеон 2?
Показать ещё 1 комментарий
Теги:
tabs
accordion

2 ответа

1
Лучший ответ

Вы должны разделить хэш, чтобы иметь в нем обе данные.

Пример 1: # 0 | 1 откроет первую вкладку и вторую панель
Пример 2: # 1 | 0 откроет вторую вкладку и первую панель

Для этого я создал 2 функции: getHash и setHash.

$(function() {
    $(document).ready(function(){
        var getHash = function(key){
            var parts = window.location.hash.substr(1).split(/\|/);
            var _key = parseInt(key) || 0;
            return _key < parts.length ? parts[_key] : false;
        };
        var setHash = function(key, value){
            var parts = window.location.hash.substr(1).split(/\|/);
            var _key = parseInt(key) || 0;
            parts[_key] = value
            window.location.hash = '#' + parts.join('|');
        };
        $(".accordion").accordion({
            heightStyle: "content",
            collapsible: true,
            animated: 'slide',
            navigation: true,
            activate: function(event, ui) {
                if(ui.newHeader.length > 0){
                    // A new accordion panel is open
                    setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
                }else{
                    // In case accordion panel is closed
                    setHash(1, '');
                }
            },
            active: false
        });

        $( "#tabs" ).tabs({
            collapsible: true,
            activate: function(event, ui) {
                if(ui.newTab.length > 0){
                    // A new tab is open
                    var tabHash = ui.newTab.parent().children().index(ui.newTab);
                    if(tabHash == getHash(0)){
                        // In case current tab is the one in Hash, we open wanted accordion panel
                        // Make sure to parseInt hash value, because jquery-ui require an integer
                        ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }else{
                    // In case we close tab, hash is cleared
                    window.location.hash = ''
                }
            },
            create: function(event, ui){
                if(ui.tab.length > 0){
                    var tabHash = ui.tab.parent().children().index(ui.tab);
                    if(tabHash == getHash(0)){
                        // In case current tab is the one in Hash, we open wanted accordion panel
                        // Make sure to parseInt hash value, because jquery-ui require an integer
                        ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }
            },
            // Make sure to parseInt hash value, because jquery-ui require an integer
            // Remove the " || 0 " if you want all to be closed
            active: parseInt(getHash(0)) || 0
        });
    });
});

Я сделал вилку здесь: http://jsfiddle.net/9nKZp/1/
И результат здесь: http://jsfiddle.net/9nKZp/1/show/

Поделиться
  • 0
    Абсолютно здорово! как я и предполагал. Спасибо
  • 0
    Damnnnn! большое спасибо за это !!!
Показать ещё 1 комментарий
1

В .accordion() -call вы хотите использовать active: N где N - индекс аккордеона, который вы хотите развернуть (он принимает число, но ваша скрипка использует его как логическое).

Теперь вам просто нужно указать значение N а не мое твердое значение 1. На основе вашего ui.tab.hash -method может работать.

Существует несколько различных способов получения параметров запроса, но ваш URL-адрес должен быть чем-то вроде demosite.com/site?tab=1&accordion=2. Проведите некоторое исследование того, как получить параметры querystring в Javascript-переменных.

Здесь вилка вашей скрипки

Поделиться
  • 0
    Этот ответ был неправильным, я обновил Скрипку и ответил.
  • 0
    Отлично, я посмотрю на это. Единственная проблема заключается в том, что в каждой вкладке будет открыт второй аккордеон. Могу ли я сделать что-то, чтобы притвориться?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню