Использование аккордеона jQueryUI и запуск события, когда оно меняется, чтобы действовать в новой "панели" - PullRequest
Новая
       2

Использование аккордеона jQueryUI и запуск события, когда оно меняется, чтобы действовать в новой "панели"

1 голос
/ 07 января 2012

Ссылка JSFiddle:

http://jsfiddle.net/dqkZN/32/

Вот соответствующий код: 

<div class="categories">     
    <h3>
        <img src="http://i.imgur.com/t5UXT.gif" />
        <a href="#">CCTV</a>
        <sub>Circuito Cerrado</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>

    <h3>
        <img src="http://i.imgur.com/TThAk.gif" />
        <a href="#">ALARMAS</a>
        <sub>Magellan Sprit Spectra Digiplex/Evo</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>
</div>

$('.categories').accordion();

$('.categories').accordion({
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
   }
});

$('.categories h3 img').click(function() {
    $(this).next().click();
});

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

Вот конкретное место, которое, я думаю, мне нужно разместить код JavaScript: 

$('.categories').accordion({
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
       //SOME CODE SHOULD GO HERE TO ACT ON "THIS" NEWLY SELECTED PANE.
   }
});

Ответы [ 2 ]

3 голосов
/ 07 января 2012

новая скрипка http://jsfiddle.net/dqkZN/39/

это то, что вы ищете ?? 

var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
    plusImgUrl  = "http://i.imgur.com/TThAk.gif";

$('.categories').accordion({
 changestart: function(event, ui) {
  $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');       
  ui.newHeader.find("img").attr("src", minusImgUrl);
  ui.oldHeader.find("img").attr("src", plusImgUrl);
 }
});
0 голосов
/ 07 января 2012

вот так: http://jsfiddle.net/dqkZN/37/

только что добавлено: 

$('.categories').accordion({
   changestart: function(event, ui) {
        var active = ui.options.active;
        $("h3 img").attr('src', extend_icon);
        $("h3:eq(" + active + ")").find('img').attr('src', collapse_icon);
   }
});
...