0

HootSuite のように動作するようにカスタマイズされた jquery-ui-tabs を使用してタブ バーを実装したいと思います。HootSuite でこれを試してみて、私が何を意味するかを確認してください。

  1. hootsuite.com アカウントにログインします。
  2. タブの右側にある + 記号をクリックします
  3. 「その他...」タブが表示されるまで、「MMMMMMMMMMMMMMMMM」という名前のタブを追加します。

これが表示されます: hootsuite タブ バー オーバーフロー http://issues.tauren.com/hootsuite-sample.png

HootSuite には次の機能が含まれており、そのすべてを実現したいと考えています。

  1. できるだけ多くのタブを画面に収めます。画面が大きいユーザーには、より多くのタブが表示されます。
  2. スペースがなくなると、[その他...] タブにドロップダウン リストが表示されます。
  3. [その他] タブをクリックすると、追加のタブのリストがドロップダウンします。
  4. タブはドラッグして並べ替えることができます。
  5. [その他] ドロップダウン リストのタブをタブ バーにドラッグできます
  6. タブ名の横に小さな X があるタブを削除します
  7. 最後のタブの右側に + アイコンが付いたタブを追加します

私はすでに 4 と 6 を実行するタブ バーを使用しています。非常にクールなPaging Tab Pluginを見つけましたが、動作が異なります。上記を達成するのに役立つプラグインやテクニックを知っている人はいますか?

私の考えでは、[その他] タブを実際のタブにするのではなく、単にタブのように見えるオブジェクトにします。別のタブが収まるかどうかを計算するロジックを tabs.add メソッドに追加します。それができない場合は、タブの詳細を別の「その他」リストに追加します。これをすべて機能させるにはかなりの労力が必要になるため、役立つプラグインがあればぜひ教えてください。

ところで、さらに調べてみると、HootSuite はこのために UI タブを使用しているようには見えません。これを行う jquery プラグインが既にある場合は、自作ソリューションの作成を避けたいと思います。

更新: 私はこれにもう少し時間を費やしましたが、現在、私のカスタム ソリューションは 1、4、6、および 7 を実行しています。ただし、スペースが不足すると、デフォルトの ui-tabs の動作が発生し、2 行目のタブが表示されます。 . また、hootsuite のようなソリューションを構築する時間が見つかるまで、使用できる別のスクロール ソリューションも見つけました。それでも、誰かが他の同様のプラグインを知っているなら、私に知らせてください!

4

2 に答える 2

0

私がしたことは、タブのサイズを変更して特定のポイントまで絞ることでした。これの解決策を持っている人を知りたい

于 2010-03-19T07:58:11.387 に答える
0

私はまだこれを行っていませんが、これを解決するために Twitter Bootstrap を使用することを考えています。ドロップダウンのあるタブの例がうまくいくようです。 http://twitter.github.com/bootstrap/components.html#navs

ただし、タブのドラッグアンドドロップはサポートしていないと思います。

于 2012-07-28T03:17:16.360 に答える