jQueryのタブとアコーディオンの代替語

Question

私たちは現在、jQueryのタブを実装した学生向けのページを開発しました。 各タブには、レッスンの詳細が表示されます。ここでは、最も左のタブが最も早く開始するレッスンのタブです。

私たちの問題は、タブ自体とそのスペースです。これは、各タブの名前がコースの名前に対応しているためです...非常に長くなる可能性があります。長い名前のついたすべてのコースが10コースあるとしましょう。これは間違いなくタブをひどく見えるようにします。

私たちはアコーデオンという考えを考えましたが、生徒は次のコースを見つけるために全部スクロールしなければならないと気に入らなかったのです。

これを念頭に置いて、タブとアコーディオンの代替手段はありますか？これは主にUIデザインの問題です。

は、事前にありがとうと任意の提案をいただければ幸いです:)を念頭に置いて

Answer 1

を、タブとアコーディオンのいずれかの選択肢があるのですか？ 主にUIデザインの問題です。

質問は多少話題にはなりますが、実装にはある程度のプログラミングが必要になるため、投票するよりもむしろ答えます。問題のあるテキストを短縮し、title属性（またはカスタムツールチップ）を使用して、ツールチップにフルネームを表示する

オプション（新しいブラウザでサポートされている）1
使用CSS text-overflow: ellipsis。または、省略記号のサーバー側を作成し、必要なマークアップを出力します（単純ではありますが精度は低くなります）。

オプション2
複数行のテキストを表示するjQueryのUIスタイルシートを変更します。

オプション3
オプション＃1と＃2の両方のjQuery UI CSSへの変更を必要とします。要件がより特殊化している場合は、独自のタブプラグインを作成して、必要な方法で正確に表示できます。それは驚くほど少量のコードで行うことができます。

ような表示領域に収まらなかったタブを明らかにスライドオプション4
使用タブ：http://www.slidetabs.com

オプション5
動的グリッドレイアウトを使用して、より創造的コンテンツをアレンジjQuery Masonryのようなツールです。この方法では、利用可能なすべての画面の不動産を埋めることができます。より高い優先順位のコンテンツを最上部の近くに配置することができます。