はてなブログ: スマートフォン表示での脚注を 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 を読み込ませてやればいいと思います。
最後に
このブログあんまり脚注使ってない。。