はてなブログ: スマートフォン表示での脚注を Wikipedia っぽくする

あけましておめでとうございます。いや、めでたくないです。課題がまったく終わっていません。

今回は上の動画を見ればわかるように、 Wikipedia のスマートフォン版の脚注のように押すとひゅいっと（あっ…）出てくるやつをつくったので置いておきます。

設置方法

以下のコードを記事下のやつに貼り付けて、「スマートフォン版にも表示する」にチェックを入れて保存すれば終わりです。

挙動と仕組み

スマートフォン版（つまり entry-list 下）の a タグで href 属性が「#f」から始まり、さらに name 属性が「fn」から始まるものを拾ってきて click イベントを乗っ取ります。あとは HTML を入れ替えているだけです。またスクロール時に勝手に消えるようになっています。

注意

onload イベントを拾ってからコードが実行されるので、読み込みが完全に終わるまでは通常の動作になってしまいます。 2 回 jQuery を読み込みに行っちゃうのが嫌だったのでこうしましたが、さっさと処理して欲しい場合は

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
    $(function() { ... });
})(jQuery);
</script>

ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ

のように先に jQuery を読み込ませてやればいいと思います。

最後に

このブログあんまり脚注使ってない。。