“Pin Menu”使用JQuery [英] "Pin Menu" using JQuery

问题描述

我不知道RegexPal用于快速参考的菜单类型是什么，因此我将其称为Pin菜单（不确定是否有更合适的名称？），但我会喜欢重新创建基本上是这样的功能：

I don't know what to call the type of menu that RegexPal use for their quick reference, therefore I've called it a "Pin Menu" (not sure if there's a more appropriate name?), but I'd like to recreate the functionality which essentially is:

• 在鼠标悬停时打开，在鼠标输出时关闭。


• 固定永久打开的Pin功能。


• 关闭按钮立即关闭它（虽然我对此部分不太感兴趣）。

我将如何在JQuery和/或标准javascript中创建它。

How would I go about creating this in JQuery and/or standard javascript.

可以在这里找到RegexPal示例（这是快速参考）。我在下面发布了一个截图：

The RegexPal example can be found here (it's the quick reference). And I've posted a screenshot below:

推荐答案

我喜欢Ori的答案，但是搞砸了，我已经写过了。无论哪种方式，你想远离'锁定'全球，你想把所有这些都包装成一个插件（你确定已经不存在了吗？）。

I like Ori's answer, but screw it, I already wrote this. Either way, you want to stay away from the 'locked' global, and you want to wrap all this up into a plugin (are you sure one doesn't exist already?).

风格：

#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>

这篇关于“Pin Menu”使用JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！