0

画面の下部にあるFacebookスタイルのバーにインスタントメッセンジャーを構築しようとしています。何度も試した後、基本的なセットアップはできましたが、これにアプローチする方法に行き詰まりました。私の質問がこのように十分具体的であることを願っています。私が単純な形で再現しようとしている Facebook IM について考えてみてください。

私のコードには 2 つの関連する問題があり、1 つの質問があります。

  1. 緑色の友達のdivをクリックすると下に展開しますが、上に展開するにはどうすればよいですか?

  2. 友達をクリックしたときに #container に追加の div を追加するにはどうすればよいでしょうか?

    質問：。おそらく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;
}
​

Jクエリ:

$('#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/

4

1 に答える 1

1

1) 上下に拡大するには、Slide jQuery UI エフェクトを参照してください。$('#my-element').show('slide');および と組み合わせて使用​​できます$('#my-element').hide('slide');。また、同じ方法で使用できる他の効果がたくさんあり、探しているものよりも多くの可能性があります。追加のパラメーターを指定して、効果のレンダリング方法を制御することもできます。

2) コンテナーに追加の DOM 要素をアタッチするために、append()またはprepend()jQuery 関数を呼び出し続けることができ、それらはコンテナーの子要素の末尾または先頭に要素を追加し続けます。

于 2012-10-04T11:20:25.857 に答える