4

请在思考错误之前阅读所有问题。

实现类似 Facebook 通知的样式

我正在尝试实现类似的 Facebook 通知系统，但我需要一些帮助来设置样式。我已经制作了通知，后端工作得很好，但是我正在使用一种解决方法来设置样式 - 相信我，这很慢，很难看，并且无法为我提供一种设置源样式的好方法。

我正在谈论的是在“用户点击通知”和“用户接收加载的通知”之间发生的操作。我说的是这部分的风格。诸如“我如何打开一个装有通知的盒子？”之类的东西。单击按钮/div/图像/文本后。

好的，让我们继续。现在我正在使用Fancybox创建我的通知框 - 是的，FANCYBOX！以下是单击“通知”按钮（“0”）后使用 Fancybox 获得的视觉效果：

我的 Fancybox 通知

这对你来说可能看起来很美，但对我来说它很丑 - 这真的非常慢。为了解决这个问题，我禁用了 Fancybox 的图像，所以当它加载时，它加载时没有黑色背景、“X”关闭窗口和其他东西。以下是我的代码。

部分负责标题：

<!-- This is the html generated by Ruby on Rails,number is dynamic-->
<a href="/notifications/index" class="various fancybox.ajax">0</a>

<script>
  $(document).ready(function(){
    $(".various").fancybox({
      openEffect: 'none',
      closeEffect: 'none',
      prevEffect: 'none',
      nextEffect: 'none',
      fitToView : false,
      autoSize: false,
      scrolling: 'auto',
      maxWidth:300,
      maxHeight:500,
      padding: 0,
      leftRatio: 0.86,
      topRatio: 0.18
    });
  });
</script>

这是生成的通知/索引/的 HTML（用于实际示例）：

<div class="post group">
        <div class="notifications-content">
        <div class="group" id="notification-0">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Bruno postou:</b>
          </div>
          <div class="post-middle-text">
               ADO
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:34 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-1">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Fernando Paladini postou:</b>
          </div>
          <div class="post-middle-text">
              hummmmmmmmm #boilo
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:36 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-2">
        <div class="post-middle">
          <div class="notifications-title">
            <b><a href="#">@Ramon Diogo</a> postou:</b>
          </div>
          <div class="post-middle-text">
              http://www.youtube.com/watch?v=A3zPI-DBf7U
          </div>
          <div class="post-middle-actions with-dots">
              <label></label>
              <label>Comentado às 12:47 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>
</div>

我如何仅使用 HTML、CSS 和 jQuery / JS 来做到这一点？我的意思是，当点击按钮打开一个带有加载内容的“框”时，当点击关闭“框”时的效果。我真的，真的不知道怎么做。实际上我正在使用 Fancybox 打开一个模式，但我不想打开一个模型，我想让它像 Facebook 和像 Trello 这样的网站 - 只是 css/jquery。

请注意，我不是要代码，我需要帮助，因为我不知道如何做到这一点。我想要说明：单击按钮时需要做什么，打开通知框。或者当点击通知框外时，关闭通知框。这背后的概念，但如果你也发布一些代码，我会考虑，因为这将帮助我学习。

4

1 回答 1

4

您可以在包含通知的 div 上进行绝对定位。

它应该作为默认行为隐藏，并且您可以在点击 javascript 时使其可见。

这将对您有所帮助：http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/但是您应该更改行为以响应单击事件而不是 mouseenter（脚本部分的第 14 行）。将该部分替换为以下内容：

$(this).click(function(e) {  
    $(this).find("ul").stop(true, true).slideDown();
    e.preventDefault();
});

注意“preventDefault 部分？那是为了避免浏览器在点击时进入链接。

于 2013-10-19T03:27:50.080 回答