フレームの代わりにjQueryを使う

html4.01まで普通に使われてた「フレーム」ですが、
html5では「フレームはアクセシビリティに反する」として、

が廃止になりました。

まぁ、W3C
「正しいhtml5ではありません。」
と、怒られるくらいで、ちゃんと表示してくれるのですが、
正しい文法を使えるに越したことはないので
この先どうしようかと悩んでおりました。。。

今流行のjQueryを使って切り替えるページをボックス要素として表示できるとの情報があり
早速、刺繍.com内のページにもこれを採用してみました。

各種文字見本 のページです。
pagify2
いかにもフレームで作ってそうですが、
上部のメニューで各ページを表示すると
ページ上下はそのままで、真ん中部分だけを読み込んで切り替えます。
ページを移動するとアドレスバーには #block01 という風に表示されますが、
実際には block01.html をボックス要素として読み込んでいるのです。
ページのソースを見ると block01.html は見えず、元のファイルソースだけしか見えません。

使い方はというと、
Pagify というプラグインを使います。
Chris Polis という方が作られ、彼のページに簡単な使い方が載っています。

jquery.js と pagify.jsという名前の小さいジャバスクリプトを読み込み、
読み込みたいページを作って、セレクタ名と同じ名前のページを作るだけ。
簡単にできてしまいます。

Pagify on github

CHECK IT OUT!!

スポンサーリンク
スポンサーリンク