| @技術/プログラミング
jQueryを使って、「もっと読む」をインタラクティブにした。これまでもjQueryを使って細工してたんですけど、slideToggle() で先読みしたものを隠しておいて、クリックで展開すると...

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

DSC_2695

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

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

1032-site-structure-1.png

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

これを、各エントリーの div.comment entry-content の部分に id をふり、「もっと読む」をクリックしたら onclickreadMore('#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を一通り使えるようになりたい。

この記事に似ている記事

  • Screenshot
    クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのはhysyskさんのブログ。ローディングgifはこ...
  • Screenshot
    最近のコメントのページ(Recent Comments)で、各コメントのタイトルにマウスオーバーするとコメントの本文を取ってきてぬるっと表示するようにした。Tumblrの notes を読み込むときみたいなアクション。結構かっこいい。コードは...
  • Screenshot
    遅ればせながら、LDRizeとMinibufferというGreasemonkeyをFIrefoxに入れてみました。GoogleやTwitterやTumblrの閲覧が劇的に改善されます。いままでメリットが分からず入れてなかったんだけど、アホです...
  • Screenshot
    ポータルシットのコメント一覧ページで、マウスオーバーして全文を取得するやつをかっこよくした。これまではjQueryでスクレイピングして、記事のパーマリンクからコメントを取得していた。しかしこれは無駄なクエリが発生する。記事本文を取得するクエリ...
  • Screenshot
     SafariやP_BLOG用のバナーを使わせてもらっている trifles さんを覗いていたら、記事タイトルに記事のPermalinkをリンクする方法が紹介されていた(trifles : 記事タイトルから個別ページにリンク)。他のブログツー...
  • ヤバスクリプト March 16, 2009
    Screenshot
    最近JavaScriptで遊んでます。まだ初歩的なことしかできないんだけど、IE6でアクセスがあった場合、初回と10回目にアラートを出すことにしました。IE6ユーザーのみなさん、うざいでしょう 8-) はやくあんな前近代的ブラウザは捨ててFi...

Comments


(Option)

(Option)