«Меню Pin» с использованием JQuery

Question

Я не знаю, как назвать тип меню, которое RegexPal использует для быстрого ознакомления, поэтому я назвал его «Pin Menu» (не уверен, что есть более подходящее название?), Но я бы хотел бы воссоздать функциональность, которая по существу:

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

Как бы мне создать это в JQuery и / или стандартном javascript?

Пример RegexPal можно найти здесь (это краткий справочник). И я выложил скриншот ниже:

Answer 1

Мне нравится ответ Ори, но прикрути его, я уже написал это. В любом случае, вы хотите держаться подальше от «заблокированной» глобализации и обернуть все это в плагин (вы уверены, что его уже нет?).

Style:

#pincontent {
  display: none;
  border: 1px solid black;
}

#pin, #close {
  cursor: pointer;
}

Код:

$(document).ready(function() {
  $('#pinmenu').data('pinned', 0);

  $('#pintrigger').mouseover(function() {
    $('#pincontent').show();
  });

  $('#pinmenu').mouseleave(function(evt) {
    if ($('#pinmenu').data('pinned') !== 1) {
      $('#pincontent').hide();
    }          
  });      

  $('#pin').click(function() {
    var pinned = $('#pinmenu').data('pinned');
    if (pinned === 0) {
      $('#pin').css('color', 'red');
      $('#pinmenu').data('pinned', 1);        
    } else {
      $('#pin').css('color', 'black');
      $('#pinmenu').data('pinned', 0);        
    }
  });

  $('#close').click(function() {
    $('#pincontent').hide();
    $('#pin').css('color', 'black');
    $('#pinmenu').data('pinned', 0);                
  });
});

HTML:

<div id='pinmenu'>
  <div id='pintrigger'>My Trigger</div>
  <div id='pincontent'>
    <div><span id='pin'>Pin</span> <span id='close'>Close</span></div>
    <div>Some text lalal</div>
  </div>
</div>  
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Answer 2

Вот пример использования jquery.

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<a class="menuItem" href="#" >Click me</a>
<div style="display:none;" class="panel">
    <div class="pin">
        Free
    </div>
    <p> 
        Contents here
    </p>
</div>
<script type="text/javascript">

    var locked = false;
    $("div.pin").click(function() {
        locked = !locked
        $(this).text((locked) ? "Pinned" : "Free");
    });

    $("a.menuItem").mouseenter(function() {
        $("div.panel").show('fast');
    });

    $("div.panel").mouseout(function() {
        if (locked == false) {
            $("div.panel").hide("fast");
        }
    });

</script>

Answer 3

концептуально, вот что вам нужно сделать:

Создайте скрытый div (с 'display: none;') и разместите его там, где вы хотите, чтобы он был виден позже. Создайте курсор мыши для соответствующей кнопки, например:

$('#button').mouseover(function(){
    $('#menu').css({ 'display': 'block' }); // this will make the hidden menu become visible
});

затем создайте обработчик отпускания мыши:

$('#menu').mouseleave(function(){
        $('#menu').fadeOut() // this will hide the menu again
});

Чтобы оставить меню открытым, когда пользователь захочет, снова отсоедините событие даже от отпускания мыши, например:

$('#pin').click(function(){
   $('#menu').unbind();
});

надеюсь, это поможет,

мартин