Мгновенный мессенджер в JQuery, как добавить полные divs к #container div

Question

Im пытается создать мгновенный мессенджер в стиле facebook, который находится в нижней части экрана, после многих попыток у меня есть базовая настройка, но я застрял на как подойти к этому. Надеюсь, мой вопрос достаточно конкретный. Подумайте об этом в Facebook, который я пытаюсь воспроизвести в простой форме.

У меня 2 соответствующие вопросы с моим кодом, один вопрос:

1. Если нажать зеленые друзья Див расширяется вниз, как сделать его расширить вверх?

2. Что было бы хорошим способом подключить дополнительные divs к #container, когда вы нажмете кого-нибудь из ваших друзей?

   Вопрос :. Могу ли я использовать такие компоненты, как jQuery UI, или есть какой-то хороший пример где взять и учиться? Im relativly 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 к вашему контейнеру вы можете продолжать использовать функции jQuery append() или prepend(), и они будут продолжать добавлять ваши элементы в конец или начало дочерних элементов вашего контейнера.