Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проблема с панелью пользователя (https://javascript.ru/forum/events/31461-problema-s-panelyu-polzovatelya.html)

bes 09.09.2012 18:55

Цитата:

Сообщение от cyber
но либо так, но для этого нужно лезть в код=)

переделывая div под ссылку, тоже нужно лезть в код :)

zevilz 09.09.2012 19:14

Сделал по другому.
Вернул весь код в прежнее состояние, удалил
href="#"
у ссылок в коде. Сейчас все работает отлично:) Всем большое спасибо за помощь

zevilz 09.09.2012 20:25

Блин, опять косяк нашел. На панели есть форма входа. При фокусе на инпутах закрывается панель

cyber 09.09.2012 21:28

Цитата:

Сообщение от bes (Сообщение 203818)
переделывая div под ссылку, тоже нужно лезть в код :)

ну так в хтмл проще=)

bes 09.09.2012 21:35

Цитата:

Сообщение от cyber
ну так в хтмл проще=)

исправить html, css + js, когда обращение идёт по имени тега

cyber 09.09.2012 22:47

как то так
UP подправил код
<!DOCTYPE HTML>
<html>
  <head>
  <style>
    #block {
      width:200px;
      height:200px;
      border:4px solid red;
    
    
    } 
    body {
    
      border:2px solid black;
    
    
    }
    
    </style>
  </head>
  <body tabindex='-1'>
    
    <div tabindex='-1' id='block'>
      wereasrwer
    <input type='text'>
      <div>
       <input type='text'> 
      </div>
    </div>
    
    <div id='inform'></div>
    <script>
      function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
      
      return document.querySelectorAll(selector)[0];
      
      }
      
      !function (){
      
      var elem = _("#block"), focusForElem;
      
      if (elem.addEventListener){ 
      
      elem.addEventListener('focus' , onFocus,true);
      
      document.addEventListener('focus',onDocumentFocus,true); 
    
      } else {
      
      elem.onfocusin = onFocus;
      document.onfocusin = onDocumentFocus;
    
      }
      
      function onFocus(e) {
      
       _("#inform").innerHTML = 'focus on '+ this.id;
        
        
        focusForElem = true;
        event.cancelBubble = true;
      }
      
        function onDocumentFocus () {
        
          if (focusForElem) {
            focusForElem = false;
            onBlur();
          }
        }
      function onBlur() {
      
      
      _("#inform").innerHTML = 'focus on '+ this;
      
      }
      }();
    </script>

  </body>
</html>

Работает в ие 6+ без функции _() (должно ,не пробывал), в ие8+ точно работает

П.с более гуманного решение не придумал, но может оно и есть так как код писал после того как проснулся=)

zevilz 10.09.2012 03:04

а как насчет инпутов, которые находятся внутри панели. Можно ли сделать условие, если берет на себя фокус любой из инпутов панели, то закрытие панели по blur не происходит, а если теряет фокус один из инпутов панели, то панель приобретает фокус для нормального закрытия панели по blur? Пробовал через if() написать выполнение функции закрытия панели по blur, но не могу сформулировать условие 'если берет фокус тег input панели #toppanel, то...'. Пробовал через $('#toppanel').not('#toppanel input').blur() - тоже ничего не выходит. Либо панель не открывается либо панель закрывается при фокусе на любом из инпутов панели

cyber 10.09.2012 09:37

Цитата:

Сообщение от zevilz (Сообщение 203904)
а как насчет инпутов, которые находятся внутри панели. Можно ли сделать условие, если берет на себя фокус любой из инпутов панели, то закрытие панели по blur не происходит, а если теряет фокус один из инпутов панели, то панель приобретает фокус для нормального закрытия панели по blur? Пробовал через if() написать выполнение функции закрытия панели по blur, но не могу сформулировать условие 'если берет фокус тег input панели #toppanel, то...'. Пробовал через $('#toppanel').not('#toppanel input').blur() - тоже ничего не выходит. Либо панель не открывается либо панель закрывается при фокусе на любом из инпутов панели

можно , но не нужно .
если не нужна поддержка ИЕ меньше 9 , то кож можно сократить;)

zevilz 10.09.2012 11:38

так в вышенаписанном коде панель не будет сворачиваться при фокусе на инпуте? Я правильно понял? Я просто нифига не понял в этом коде. Разбираюсь еще с js:-)

cyber 10.09.2012 12:46

сделал просто интерфейс, думаю комментарии не нужны
<!DOCTYPE HTML>
<html>
  <head>
  <style>
    #block {
      width:200px;
      height:200px;
      border:4px solid red;
    
    
    } 
    body {
    
      border:2px solid black;
    
    
    }
    
    </style>
  </head>
  <body tabindex='-1'>
    
    <div tabindex='-1' id='block'>
      wereasrwer
    <input type='text'>
      <div>
       <input type='text'> 
      </div>
    </div>
    
 <div id='inform'></div>

    <script>
      function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
      
      return document.querySelectorAll(selector)[0];
      
      }
      
      function Focus_and_Blur(opt){
      
      var elem = opt.elem, focusForElem;
      
      if (elem.addEventListener){ 
      
      elem.addEventListener('focus' , onFocus,true);
      
      document.addEventListener('focus',onDocumentFocus,true); 
    
      } else {
      
      elem.onfocusin = onFocus;
      document.onfocusin = onDocumentFocus;
    
      }
      
      function onFocus(e) {
      
        focusForElem = true;
        event.cancelBubble = true;
        opt.focus.call(this,e);
      }
      
        function onDocumentFocus (e) {
        
          if (focusForElem) {
            focusForElem = false;
            opt.blur.call(elem,e)
          }
        }
      
      };
      
  //пример вызова,  в саму функцию лучше не лезть     
      Focus_and_Blur({
        elem:document.getElementById('block'),
        focus:function () {
         
          _("#inform").innerHTML = 'focus on '+ this.id;

        },
        blur: function () {
        
         _("#inform").innerHTML = 'blur  '+ this.id;
        }
      });
    </script>

  </body>
</html>


Часовой пояс GMT +3, время: 19:28.