読者です 読者をやめる 読者になる 読者になる

MysticDoll.comをとりあえず強くしました。

CSS HTML Javascript プログラミング

時代に遅れた感じのデザインでやっつけ感のあるお仕事をしました。

コード的な話をすると、今回はjQueryを多少使って楽をしました。
以前GitHub Pagesでやってたのは、prototype.jsを利用してAjax.Updater()メソッドで用意しているページをGETしてinnerHTMLに配置するということなんですが、今回はjQueryを使ってみたので少し楽になりました。
以前(prototype.jsを利用)
function loadPage(elmId){
      new Ajax.Updater(
            {success : content},
            "/content/"+elmID+";.html",
            {method:"get"}
);
}
まあ面倒ではないですが記述多いです。
今回(jQuery.jsを利用)
function loadPage(elmId){
      $("div.content.container").load("/content/" + elmId + ".html .content.container div[id=content]");
}
これで、メニューには
 onclick="loadPage(event.srcElement.id)";
を与えて再帰的に使えるようにしてみました。ここはwindow.onloadで動的にjQueryを利用して与えてもいいんですが無駄なのでやめました。
実はこれHomeのリンクのidがすごいことになってるのでここは本当ならidじゃなくてgetAttribute(hoge)にして独自Attributeを実装したほうがよかったかなあなんて思ってます(そのうち変えます。)
まあこんな風にjQueryとかで動的にdiv要素の内部を変更すると、同じようなページを何個も作る必要がなくなりますし、CSS自体も引き続き適用されるので、同じCSSルールでページを変更できるので個人的には好きです。
まあ長々と書きましたが正直Bootstrapとか使ったほうがきれいに書けるのでみなさんそういうの使いましょう。