Bookmarkをブックマークして折りたたんで使う


..自己満足といわれてしまえばそれまでなんだけどね..

とりあえず、業務に必要なブックマークデータを支給されたけど、一時的なものだし、すぐにはいらなそうなのも入ってるし、それをそのまま読み込んで使うと整理する必要があるし、余計なブックマークって結局埋もれるので、そのファイルはローカルにおいて、それをブックマークして使ってたんだけど、結局、ズラズラ長いし使いづらいことには変わりないのでちょっと改造することにした。

支給されたブックマークデータってのは、ブラウザで書き出されたbookmark.htmlってやつで、DLタグとかで構成されててるアレです。で、なにをしたのか?っていうと…

  1. jQueryの導入
  2. 長い一覧を折りたためるように設定

の2点。

まず、念のため<html>とか<head>、<body>タグを追加して体裁を整えておきます。次に、<head>に以下のコードを追加。

<br />
<br />

//&lt;![CDATA[</p>
<p>jQuery(document).ready(function($)
{
    $("div#bookmark .sub").hide();
    $("div#bookmark .main_title").each(function(i)
    {
        var elementVal = $(this).next(".sub");
        $(this).click(function()
        {
            elementVal.toggle("normal");
        });
    });
});</p>
<p>//]]&gt;
<br />

で、<DL>のある部分(折りたたみたい部分のエリア)全体を<DIV id=”bookmark”></DIV>でくくります。で、折りたたむ部分の上の部分の行を、

<br />
<DT><H3 class="main_title">Word Press 関係</H3><br />

とかいってmain_titleクラスに指定をし、その下の折りたたむ部分を、

<br />
<DL class="sub">
<p>

とかいう感じでsubクラスに指定します。

あとついでに<head>内に

</p>

<!--
.main_title {cursor: pointer;}
//-->

<p>

とでもしておけば、気持ちいいかも。まあ、ほかにも気持ち悪い部分(タグが大文字等)とかあるけど動いてるのでまあ(゚ε゚)キニシナイ!!。一時的なものだしね。

サンプルおいておきますので。

bookmark_test.zip

ざっくりと補足:
jQueryにページ読み込んだらsubクラスは非表示にしておいてね。
でもって、id:bookmarkのエリアにある全部のmain_titleクラスを監視して、クリックされたら、クリックされたすぐ次のsubクラスの表示の状態を逆にしてね。
ってなことをやらしてる。jQueryかわいいよね。

補足2:
IEでローカルから表示させるとActiveなんとかの警告がでますね。やましいことはなにもしていないので、気にせず許可しても大丈夫です。一応IE8とFF3.6で動作確認済み。

カテゴリー: 仕事 タグ: , パーマリンク
おもろないいまいちだふつう…だまあまあだおもしろい (未評価)
※よろしければ、今後のために「おもろ指数」の評価をお願いします。
Loading...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です