JQuery переключить выдвижную панель - PullRequest
Новая
       35

JQuery переключить выдвижную панель

1 голос
/ 15 октября 2010

Я использую выдвижную панель , которая по умолчанию настроена на отображение: нет. Если нажать на триггер, он переключит класс на «активный». Это заставляет триггер показывать красный крестик (для закрытия), исходящий из позиции спрайта. 

$(document).ready(function(){
$(".info-panel-left-trigger").click(function(){
 $("#info-panel-left").toggle(400);//switching between display and display:none
 $(this).toggleClass("active");
 return false;
});

}); Так что это то, что у меня есть, но теперь приходит то, что я хочу, и, возможно, у одного из вас есть понимание, как этого добиться.
Я хотел бы создать опцию, чтобы панель отображалась по умолчанию или скрывалась по умолчанию, а переключатель должен вести себя соответственно. Это будет означать, что если я выбрал показ панели по умолчанию, то переключатель должен быть установлен в «активный», чтобы показать позицию спрайта x. Если я решил скрыть панель по умолчанию, переключатель должен быть установлен на «неактивно», чтобы показать положение + спрайта.

Надеюсь, я прояснил себя достаточно ясно. ПОМОЩЬ очень ценится.

РЕДАКТИРОВАТЬ Вы, ребята, правы. Нужно больше объяснений. Я просто хотел, чтобы он был как можно более коротким, но вот еще немного ...

Я создаю шаблон веб-сайта, и покупатель шаблона должен иметь возможность включать эти панели в информационных целях. По умолчанию он должен настроить отображение панели и установить класс триггера на «активный». Это покажет мой маленький x для закрытия.
Но если покупатель шаблона добавит дополнительный класс «hide» к разметке панели, панель должна быть скрыта по умолчанию, а триггер не должен быть установлен активным, потому что в этом случае мой триггер будет показывать немного + для открытия этой панели. Есть моя идея сейчас?

1 Ответ

1 голос
/ 15 октября 2010

Где (и насколько настойчиво) вы храните это значение по умолчанию? Просто на клиенте для этого сеанса или на стороне сервера? Серверная сторона показалась бы мне наиболее логичной ... если это так, когда пользователь выбрал показ панели, добавьте класс в html-панель информации слева. Предполагая, что тогда у нас есть 

<div id="info-panel-left" class="shown"></div>

Добавьте немного JavaScript, чтобы оно читалось 

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'shown' ) ) {
        infoPanel.show();
        infoPanelTrigger.addClass( 'active' );
    }
    ... etc ...

(конечно, вы могли бы также использовать «активный» класс)

РЕДАКТИРОВАТЬ: хорошо; если мы просто придерживаемся части JS, я не думаю, что это сильно меняет подход, не так ли? Просто переверните его: 

<div id="info-panel-left" class="hide"></div>

1012 * тогда * 

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'hide' ) ) {
        infoPanel.hide();
        infoPanelTrigger.removeClass( 'active' );
    }
    ... click trigger, toggle etc ...
...