如何制作Facebook通知?

时间:2013-10-19 01:47:14

标签: javascript css notifications

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

Implementing a Facebook Notifications like style

我正在尝试实施类似的Facebook通知系统,但我需要一些帮助。我已经发出了通知,后端工作得很完美,但是我正在使用一种解决方法来设置样式 - 并且让我抓狂,这很慢,很丑,无法为我提供一个很好的方式来设置源代码。

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

好的,让我们继续。 现在我正在使用Fancybox创建我的通知框 - 是的,FANCYBOX!以下是点击“通知”按钮(“0”)后我在Fancybox中获得的视觉效果:

My Notification with 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。

注意我不是要求代码,我需要帮助,因为我没有任何ideia如何做到这一点。我想要说明:单击按钮时我需要做什么,打开通知框。或者单击“外部通知”框时,请关闭通知框。这背后的概念,但我会考虑你是否发布了一些代码,因为这将有助于我学习。

1 个答案:

答案 0 :(得分:3)

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

它应该作为默认行为隐藏,并使用javascript在点击时显示。

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

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

注意“preventDefault部分?”是为了避免浏览器在您点击时输入链接。