Активное состояние меню jqDock не восстанавливается после наведения мыши - PullRequest
Новая
       18

Активное состояние меню jqDock не восстанавливается после наведения мыши

0 голосов
/ 25 января 2012

Я использую плагин jqDock для создания меню дока с помощью jquery. http://www.wizzud.com/jqDock/

Существует одна опция для передачи «активного» индекса пункта меню. Активное состояние существует при загрузке страницы, но не работает после повторного наведения мыши на меню.

Любые предложения, чтобы этот пример кода работал с функцией возобновления состояния "Активно". 

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.min.js'></script>
<script>
jQuery(document).ready(function($){
  // set up the options to be used for jqDock...
  var dockOptions =
      { align: 'top' // horizontal menu, with expansion DOWN from a fixed TOP edge
  , size: 60 //increase 'at rest' size to 60px
  , labels: false //add labels
  , active: $('#menu a.active').index() //set the initially active item
  , onReady: function(){
      $(this).removeClass('hideThis'); //need to show the dock myself
      //return false; //leaves the dock asleep and requiring a 'nudge'!
    }
  }
  //and get $('#menu')...
, Menu = $('#menu');

  //replace my default click handler with a 'active' toggler...
  Menu.children().unbind('click').click(function(){
  //Note: I've set it so that you can only nudge the 'active' item...
  if($(this).filter('.active').removeClass('active').length){
    Menu.jqDock('nudge'); //wake or thaw the dock
  }else if(!$('.active', Menu).length){
    Menu.trigger('dockfreeze'); //freeze the dock
    $(this).addClass('active');
  }
  this.blur();
  return false;
}).end()
// ...and apply jqDock...
.jqdock(dockOptions);
});
</script>
<style type="text\css"></style>
</head>
<body>
<div id='page'>
  <div id='menu' class='hideThis'>
    <a href='#'><img src='Addressbook.png' title='Downloads' alt='' /></a>
    <a href='#'><img src='DVD-Player.png' title='Websites' alt='' /></a>
    <a href='#' class='active'><img src='eMail.png' title='Users' alt='' /></a>
    <a href='#'><img src='Instant_Messaging.png' title='Security' alt='' /></a>
    <a href='#'><img src='Safari.png' title='System' alt='' /></a>
    <a href='#'><img src='Terminal.png' title='System' alt='' /></a>
  </div>
</body>
</html>

Единственный аспект, который я узнал, это то, что «jqDock» инициализируется только один раз. он не может быть повторно инициализирован с другими параметрами снова и снова.

все еще не повезло: (

1 Ответ

0 голосов
/ 01 апреля 2012

В http://www.wizzud.com/jqdock/faqs/, число 27 пытается объяснить сложность поддержания «активного» предмета.В нем также говорится, что v1.6 + предоставляет средства для возможного обходного пути, но эта реализация остается за сборщиком.

Вы можете попробовать связать mouseleave с div.jqDock, который запускает jqdock 'развернуть команду на элементе a.active?например ... 

options.onReady = function(){
    $('#menu').mouseleave(function(){
        $(this).find('a.active img').jqdock('expand').end().jqdock('nudge');
    });
}

Примечание: дополнительный толчок зависит от того, хотите ли вы оставить док "спящим" или нет.

Лично по причинам, указанным в FAQупомянутое выше, я бы рассмотрел выделение текущего «активного» элемента с помощью стиля (например, зеленой рамки в приведенном примере), который имеет «расширенный».Как указано в документации, использование опции «active» может (да!) Привести к неприятным эффектам «jump».

...