Habrahabrソーセージナビゲーション

今日、DayliJSニュースレターで、ページに非常に便利なナビゲーションスキームを追加できるjQuery Sausageという素晴らしい拡張機能を発見しました-ヘッダーで区切られたブロックは、コンテンツの高さに応じてスケーリングされ、WebStormまたはNetBeansでdiff注釈として表示されます（同様のものが左側に表示されます）投稿）。


クリック可能な画像はjQueryソーセージの例につながります

これは、記事の大きなリストと記事の段落をナビゲートする非常に便利な方法です。 実験のために、このプラグインをjQueryおよびjQuery UIとは別に再作成し、Habrの下でシャープにすることにしました（元のプラグインは数KBの余分なスクリプトを引き出します）。 私の拡張機能は、記事ブロックまたは見出しブロックをスキャンし、ブロックのチェーンで表示します。 ブロックにカーソルを合わせると、見出しが表示されます。ブロックをクリックすると、ページは対応するページタイトルまでスクロールします。 残念ながら、すべての投稿が適切にフォーマットされているわけではないため、このナビゲーション方法は必ずしも効果的ではありません。 なぜなら これは実験であり、jQuery Sausageの一部の機能はまだ切り捨てられています。

非アクティブモードのブロックは半透明です-読み取りの邪魔になりません。

記事リストモードの色

緑-トピックリンク。
青が話題です。
黒は翻訳です。
バイオレットは企業ブロックのトピックです。

トピックモードの色

赤-コメント。
グレー-彩度に応じて、ヘッダーのレベルを反映します。
ブルーフレーム-ビデオ、オーディオ、またはフラッシュドライブ。
黄色のフレーム-写真。
緑のフレームはコードです（<source>タグのみ）。

「記事のリスト」モードの一般ビュー

参照資料

ユーザースクリプトのスクリプトページ
ソースコード

ナビゲーション方法と批判を改善するための提案や提案は大歓迎です！

UPD
ブロックフィレットを追加
列にカーソルを合わせると、ナビゲーションが容易になるように列が展開されます
ブロックにカーソルを合わせると、ブロックのタイトルが付いたツールチップが表示されます
最初の「ブロックからのソーセージ」ビューは、「垂直ブックマークのリスト」ビューに置き換えられました
ヘッダー内のリンクとトピックリンクのタイトルに関するバグを修正
Operaのz-indexポップアップヘッダーのバグを修正
Operaの「コメントブロックが表示されない」バグを修正

UPD2
altspamのアドバイスで、段落内の特別なブロック（コード、メディアプレーヤー、写真）の強調表示が追加されました。