2015-02-08 2 views
1

Я пытаюсь обнаружить, когда пользователь нажимает на панель основного ящика на веб-сайте, например.Обнаруживать, когда панель ящика-ящика закрыта?

Я пытаюсь получить некоторые атрибуты div, чтобы ответить, открыта/закрыта панель ядро-ящик.

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

Любая помощь будет оценена!

<body fullbleed layout vertical> 

<template is="auto-binding"> 

    <core-drawer-panel id="drawerPanel"> 

     <core-header-panel id="drawerCHP" drawer> 

      <core-toolbar id="navheader"> 
       <span>My Webpage</span> 
      </core-toolbar> 

      <core-menu selected="0"> 
       <core-item icon="home" label="Home"></core-item>  
       <core-item icon="settings" label="Settings"></core-item> 
       <core-item icon="help" label="Help"></core-item> 
      </core-menu> 
     </core-header-panel> 

     <core-header-panel id="chp" main mode="seamed"> 
      <core-toolbar id="mainHeader"> 
       <paper-icon-button id="navicon" icon="menu"></paper-icon-button> 
      </core-toolbar> 
      <div class="content"> 
       <!-- Content Goes Here --> 
      </div> 
     </core-header-panel> 
    </core-drawer-panel> 

    <script>  
     document.getElementById("navicon").addEventListener("click", openDrawer); 

     function openDrawer() { 
      document.getElementById("drawerPanel").togglePanel(); 
     } 
    </script> 
</template> 

'

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

+1

Как правило, мероприятие «с явным реагированием» должно выполнять эту работу. Показать какой-либо код или даже лучше настроить онлайн-пример. Это поможет лучше ответить. –

+0

@GoceRibeski Я добавил некоторый пример кода, но я не использовал панель ядро-ящик в приложении Polymer, что может быть проблемой при попытке использовать изменение с учетом ядра. Я пытался найти альтернативу с помощью JavaScript, но не повезло ?! – sbranturesh

+1

Я думал, что атрибут «узкий» является ключом, сделал некоторые тесты, но он не работает, как я ожидал: http://plnkr.co/edit/m2u3qN5URq5V3flbXVQz?p=preview –

ответ

1

look @ source for core-drawer-panel похоже, что вы можете использовать метод document.querySelector('core-drawer-panel').isMainSelected() и получить истинное/ложное возвращение. true означает, что панель закрыта, а false означает, что панель открыта.

+0

Блестяще это сработало! Спасибо за это! – sbranturesh

Смежные вопросы