2013.01.16
備忘録 jQuery .loadでfooterを管理 & ウィンドウサイズで位置変更
備忘録を長年、”ぼうびろく”だと誤認していた管理人です。みなさまいかがお過ごしですか。
ちまちまとメインサイト”さわやかまみれ”に学習を兼ねてjQuerを装備しております。
今回は”footerを外部から読み込む”のと”ウィンドウサイズによって要素の位置を替える”二つのscriptを装備してみました。
.loadで共通コンテンツを一括管理
ページ数が増えてくると各ページのfooterなどの共通のコンテンツをいちいち手動で修正するのは苦行だったりします。
DWのテンプレートやAptanaなどエディタのページ置換を利用するのも手ですが、DW持ってないしｗ置換もわりと手間が掛かります。
そこでjQueryでAjaxとか言うのを使って、ひとつのhtmlを修正すれば全てのページに反映されるようにして楽しようと思います。
しかし、Javascriptをオフで閲覧する場合は全く持って表示されないことになりますので、とりあえずリンクや新着などの利便性を考えて設置したfooterだけをjQueryで一括管理することにしました。
footerの内容を記述するHTMLファイル/side-footer.htmlを作っておきます。
DOCTYPEやheadは要らないようですが、愛用のAptanaが気にするので自分は一応いれておきました。
読み込みたい部分にidを振っておきます。#footerとしました。
|
1 2 3 4 5 6 7 8 |
<div id="footer"> <ul><!-- --><li><a href="../index.html">Site Top</a></li><!-- --><li><a href="../illustrations.html">Illustrations</a></li><!-- --><li><a href="../contact.html">Contact</a></li> </ul> <div id="#hogehoge"><img src="../image/hoge.jpg"></div> </div> |
|
1 |
<div id="footer_wrap"><!-- ここに読み込みたい --></div> |
|
1 2 3 |
$(function() { $("#footer_wrap").load("side-footer.html #footer"); }); |
このdivの所（”#footer_wrap”)に、命令.load(外部に作ったファイルside-footer.html のdiv#footerを読み込んでね)
という判りやすいscriptで出来ますた。
パスに注意！
自分の場合は、間抜けなことにリモートとローカルのドキュメントルートのお名前が違うので、相対パスを使っています。
そうすると別の階層につっこんだページではfooterにあるリンクが切れてしまいます。あまりスマートな方法ではありませんが、読み込むhtmlファイルを別階層用に用意しました。
出来うるなら、MAMPなどでローカルサーバを立ち上げ、公開するサーバと同じ環境を構築してフルパスでリンクを貼るのがベターかと思います。
蛇足ですが、サーバを介さずに直接ブラウザでhtmlをプレビューすると.loadが実行されないことがあります。MAMPおすすめ。
Ajaxとやらは、セキュリティ上の理由で別のドメインのファイルにはリクエストできません。実現するにはもっと難しいことをせなばならないようです。クロスドメインでググってみますか。
.loadした部分にscriptが効かないYO!
クリックなどイベントが発生する要素では.liveを使うと良いようです。
【追記】.liveはjQuery 1.9から使えなくなってしまいました。換わりに.onを使うようになりました。
jQuery 1.7から追加されたイベントですので、早めに書き換えるのが吉かもしれません〜
当サイトでは、読み込んだfooter内のボタンをクリックでスクロールしてトップに戻るという処理をしていますが、
|
1 2 3 4 5 6 |
$(document).on("click","#f_bottom", function() { $("body,html").animate({ scrollTop: 0 }, 300); return false; }); |
と、することでクリックした時にscriptが実行されます。
.liveで使えるイベントではない場合、.loadのコールバック関数とやらを使います。まだちゃんと理解しておりませんので備忘録ということで勘弁してください。事例は次のウィンドウサイズで要素の位置を変化させる”スズメは右にscript”に続きます。
スズメは右に
上記.loadでfooterを読み込んだ訳ですが、footer内のスズメのrssアイコンの位置をウィンドウの幅によって変えたかったとです。
wrapにしているdivにcssでmin-width:950pxを指定しており、尚かつアイコンをposition: absolute;right:-15pxでwrap外に出しております。
ウィンドウの幅が950px以下で読み込んだ時、背景が切れるなどかっこ悪いので、jQueryでアイコンのright:-15pxを10pxに替えて内側に表示することにしました。
|
1 2 3 4 5 |
if($(window).width() > 982) { //最大幅+スズメはみ出+スクロールバー17px $("#rss").css("right","-15px"); } else { $("#rss").css("right","10px"); } |
なんかこんな感じで、ウィンドウの幅を.width()で取得して、不等号（より大きい）という条件にしました。
ウィンドウの幅が982pxより大きい時、cssでright:-15px
そうじゃない時（小さいとき）cssはright:10px
ウィンドウの幅にはスクロールバーの部分も含まれるようなので、標準の17pxを足しておきました。（スクロールバーの分の幅を足して置いた方が余白が出なく安定します。）
そしてこのif〜を.loadで取得したfooter部分に効かせたい訳ですが…ちょっとお悩み。上記の.liveには該当するイベントはありません。
|
1 |
$(window).load(function(){ ... }); |
でどーよ？ と思いましたがjQuery1.8では非推奨らしいのと（1.7使ってますがｗ）画像なども全て読み込んだタイミングで働くので画像ばかりのページだと厳しそうです。
.loadのコールバック関数を使えば外部ファイルを読み込んだタイミングで上記のifが読み込めるらしい。
|
1 2 |
.load("url",function () { }); |
{ }の中に上記のif〜を突っ込んでやればいいような気がします。
しかし、if〜は読み込み時のみならず、ウィンドウリサイズ時にも使い回すのでユーザー定義関数にしときました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//ユーザー定義関数（スズメは右に windowサイズで位置変化） function suzumetoright () { if($(window).width() > 982) { //最大幅+スズメはみ出+スクロールバー17px $("#rss").css("right","-15px"); } else { $("#rss").css("right","10px"); } } $(function() { $("#footer_wrap").load("footer.html #footer", function () { suzumetoright (); //スズメは右に }); $("#sozai_layer").find("#footer_wrap").load("../footer_layered.html #footer", function () { suzumetoright (); //スズメは右に }); //スクロールしてトップ $(document).on("click","#f_bottom", function() { $("body,html").animate({ scrollTop: 0 }, 300); return false; }); $(window).resize(function() { suzumetoright (); //スズメは右にリサイズ時 }); }); |
FirefoxとSafariでは動いておりますｗ
.onで動くようにしたスクロールしてトップに戻るクリックイベントを
.loadのコールバック関数に仕込んでもよろしいかと。かえってスマートかと思われ…。お、.onは勉強なんだからねっ///。
|
1 2 3 4 5 6 7 8 9 10 |
$('#footer_wrap').load('footer.html #footer', function () { suzumetoright (); //スズメは右に $('#f_bottom').click(function() { //スクロールしてトップ $('body,html').animate({ scrollTop: 0 }, 300); return false; }); }); |
スポンサーリンク
コメントをどうぞ