Аккордеоноподобный одноэлементный расширяющий компонент в jQuery UI - PullRequest
1 голос
/ 25 февраля 2009

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

То, что мне нужно сделать, очень близко к одноэлементному аккордеону jQuery UI с AlwaysOpen = false (это же свойство называется «складным» в документе, но на практике с jQuery 1.3.2 и jQuery UI 1.6rc6 кажется быть всегда открытым):

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
});

Существует одна проблема: Мне нужно, чтобы расширение / свертывание происходило только при нажатии на треугольник слева, а не при нажатии на весь заголовок.

Дополнительным требованием является то, что я хотел бы использовать стандартные стили пользовательского интерфейса jQuery UI и не реализовывать свою собственную таблицу стилей, чтобы при необходимости можно было создавать новые стили с themeRoller. Стили аккордеона в пользовательском интерфейсе jQuery (включая стрелки в заголовке) очень хорошо подходят для этой цели.

Теперь у меня есть два варианта:

1) настроить виджет Аккордеон так, чтобы только треугольник реагировал на события разворачивания / свертывания. Мне нужно, чтобы щелчки на остальной части заголовка были в основном проигнорированы.

2) реализовать свой собственный виджет, используя в качестве основы стили аккордеона.

Я бы предпочел сделать 1), но мне трудно понять, как заставить только стрелку реагировать на события щелчка.

Итак, что касается настоящего вопроса, как бы вы это сделали?

Ответы [ 2 ]

1 голос
/ 03 ноября 2012

Я так и сделал:

$('.accordion').accordion({
  header: '.accordion-header',
  collapsible: true
});
0 голосов
/ 26 февраля 2009

ОК, оказывается, это легко сделать с помощью самого виджета аккордеона. Просто настройте гармошку так:

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
    , event: 'click'
});

$('.myAccordion h3 a').click(function() {
    return false;
})

Хотя это нехорошая практика юзабилити, поскольку целевая область кликов настолько мала, но она отвечает на вопрос, который я написал.

...