Question

我试图在Facebook风格的条形图中构建一个即时信使，它位于屏幕的底部，经过多次尝试我有一个基本的设置，但我坚持如何处理它。我希望我的问题是这样具体的。想想Facebook IM就是我试图以简单的形式复制的东西。

我的代码中有2个相关问题，1个问题：

如果你点击绿色朋友div，它向下扩展，如何让它向上扩展？
当您点击任何朋友时，将额外的div添加到#container会有什么好方法？

问题:.我可以使用像jquery UI这样的组件，还是有一些好的例子可以学习和学习？我相对jquery新手，已经尝试了几个小时来找到如何做到这一点：（

html：

<div id="container">
  <div id="friends">
    Friends: (2) Online
      <ul>
          <li id="person">Doutzen</li>
          <li id="person">Alexandra</li>
      </ul>
  </div>
    container, new chat boxes appear here
</div>

css：

body {
    padding-top: 400px;
}

#container {
    background-color: grey;
    width: 100%;
    height: 30px;
}

#friends {
    position: relative;
    height: 10px;
    color: white;
    width: 150px;
    background-color: green;
    padding: 10px;
    float: right;
    overflow: hidden;
}

#friends ul li {
    padding: 10px;
    margin: 10px;
    background-color: darkgreen;
}

Jquery：

$('#friends').toggle(function(){
    $(this).animate({'height': '100px'}, 10);
}, function(){
    $(this).animate({'height': '10px'}, 10);
});

$(".person").click(function () {
      $('#container').append("<div class='chat'>chat with ...</div>");
});

工作示例： http://jsfiddle.net/qJCmF/5/

Answer 1

1）要向上和向下扩展，请查看Slide jQuery UI效果。您可以将其与$('#my-element').show('slide');和$('#my-element').hide('slide');结合使用，如图所示。此外，还有许多其他效果，您可以使用相同的方式，可能更多的是您正在寻找的;您甚至可以提供其他参数来控制效果渲染的方式。

2）为了将额外的DOM元素附加到容器，您可以继续调用append()或prepend() jQuery函数，并且它们会继续将元素添加到容器子元素的结尾或开头。< / p>

Jquery中的Instant Messenger，如何将完整的div附加到#container div

1 个答案: