| @技術/プログラミング

jQueryを使って、「もっと読む」をインタラクティブにした。これまでもjQueryを使って細工してたんですけど、slideToggle() で先読みしたものを隠しておいて、クリックで展開するという感じにしてた。まぁこれでも良いんだけど、Ajaxってのに挑戦してみたかったので、「もっと読む」リンクをクリックした後に残りの部分を読み込むような仕掛けにした。どんな風になるかは「もっと読む」をクリックして調べてみてください。

DSC_2695

ちなみに折角だからどういう風に実装したのかを書いておきます。

このサイトの構造はこういう風になっています。

1032-site-structure-1.png

赤色の文字はP_BLOGにオリジナルのclassやidです。青ねずみ色は僕が後から追加したhAtom Microformats。

これを、各エントリーの div.comment entry-content の部分に id をふり、「もっと読む」をクリックしたら onclick で readMore('#id') というJavaScriptの関数を呼び出すようにし、外部スクリプトに以下のように記述しました。

function readMore(x) {
    var id = x.replace("#", "");
    var loadPath = '/article.php?id=' + id + ' div#wrapper div[class=comment entry-content]';
    $(x).load(loadPath);
}

サイト構造はこんな感じ。

1032-site-structure-2.png

onclick でJavaScriptを呼び出さずにjQueryで全部書いてしまうべきなのかも知れないけど、JavaScriptから個別の記事にアクセスする書き方が分からなくて、仕様は美しくないかもしれないけれど頑張りました。

ここ数日はあんまりJavaScriptを勉強してなかったのでいろんなことを忘れまくってた。プログラミングは毎日ちょっとずつでも良いからやらないとダメですね。とりあえずjQueryを一通り使えるようになりたい。