0

皆さんこんにちは!

私は現在、新しいプロジェクト、具体的には固定チャット バーに取り組んでいます。このチャット バーは、ドキュメントの幅 100% に拡張され、もちろんページの下部に固定されています。

それで、ここに私の質問があります。具体的には、jquery を使用して、それ以上タブを配置できなくなる時期を判断し、バーにタブを追加する別の方法を追加することです (例: タブ、または各タブを反復する単純なスクロール ボタン)。

私の問題は、プロセスのこの時点で、この計画を「攻撃」する方法が正確にわからないという事実です。現在、チャット バーは親 div (ghChatBar) で構成されており、子は左にフロートし、タブは独自の div に含まれています (簡単にアクセスできるように分離するため、現在は div id "ghChatTabs" を保持しています)。

分解するには、タブが分割の終わりに達したときを判断する方法を見つけたいだけですが、オンラインの友達ボタンには影響を与えず、ユーザーがさらに多くのタブを開くこともできます。バーの外に出ることなく、バーに追加してください。Facebookのアプローチがどのように機能するかが好きです。十分な数のタブを開くと、画面に収まらないタブで構成されるドロップメニューが追加されます。簡単にする場合は、右側に他の div は表示されず、タブのみが表示されます。順序付けられていないリストのアプローチを使用してバーを再コーディングする方が賢明だと思いますが、それについても考えていますか?

私のチャットバーのレイアウト例: ImageShack.Us Image

事前にご回答いただきありがとうございます。お時間を割いてご協力いただき、誠にありがとうございます。

ありがとう!

編集

<div id="ghChatBar">
    <div class="friends-online">
        [11] Friends Online
        <div class="friends-list">
            <!-- Friends list popup div goes here -->
        </div>
    </div>
    <!-- Chat Window Container -->
    <div id="ghChatTabs">
       <div class="ghChatWindow" data-userid="userid" id="user-chat-{id_goes_here}">
           <!-- Inside of Chat Window -->
       </div>
    </div>
    <!-- End Chat Container -->
</div>

明らかに、親 div "ghChatBar" は固定位置、100% 幅などを保持します。上記は、このバーが組み込まれている html の簡単な内訳です​​。そのバー内のすべては、単純に左にフロートします。すべてに設定された幅があります。

4

0 に答える 0