「あれこれリンクリスト」 と読みます。
ありみかさんのとこの ナビシート の劣化版みたいなもので、そのページの中にある <link href="*">や <a href="*">、 設定次第では <q cite="*">とか <blockquote cite="*">とか、 <div id="*">とか、 それらの一覧を、ページのどっかにリストアップします。
このページで言えば、ページの右上になんか怪しいボタンがあるはず。
マウスでカーソルをずずって持っていくと、なんかでるかと思います。
設定とかくわしい説明はまた後で。
ホバー(マウスオーバー)でもリストが開閉しますが、 見出し(LinkArekore)や 各グループ名(黒い部分)を クリックしても開閉されます。
クリックで開閉したときは、一時的にホバーでは開閉しなくなります。
(設定で変更できます)
この状態は、リストが全閉じされると、リセットされます。
ホバーでリストを開閉するかは設定で変更できます。
もしホバーでは開閉しないにするなら、
最初はリスト全体が開いたままになります。
(クリックで開閉できます)
最初はリストが閉じてたほうがいいなら、
ホバーで開閉する設定にするか、
スタイルシートでリスト部分を
display:none;
としておけばいいかも。
普通<link>要素なら全部ピックアップしちゃうわけですが、
とある属性と属性値を持ってたら、
その要素をスキップ(リストに載らない)させることができます。
ひとつでもマッチしたらスキップしちゃうので取り扱い注意
グループごとの id とか class とかはそれなりに設定できます。
デザインとか置く位置とかは、CSSで制御してください。
JavaScriptの中で使われるスタイルは、
style="display:none;"
させるかどうかだけです。(笑)
いずれも「対象をファイルに保存」でよろしく。
置き方は、 HTMLファイル のどこかに、下記のように。
普通は<HEAD>内ですが、どうせ window.onload したときにスクリプトが動き始めるので、 </BODY>の直前あたりでもいいかも
<link rel="stylesheet" type="text/css" href="ArekoreLink.css">
<script type="text/javascript" src="ArekoreLink.js"></script>
注釈付の方はUTF-8で書かれているので、
charset="UTF-8"
をつけるとやや安全やも。
JSのファイルを開けば、 一番上あたりに設定があります。
ピックアップする種類も、その辺で追加・変更できたりするので、 がんばって理解して、いろいろいじってみていただきたい所存。
どんな風にピックアップ設定できるかをちらり解説。
実際に例を出してやった方がわかりやすいかと思うので、 <blockquote cite="*"> と <q cite="*"> のリストを作ってみましょう。
まず、既にある部分をコピーして、その下に貼りつけます。(↓な感じ)
// Blockquote
{
// group-condition
'group' : '', // tag-name
'class' : '', // class
'id' : '', // list-id
// element-condition
'tag' : '', // tag-name
'href' : '', // for link-address.
'term' : '', // for item-name.
'title' : '', // for item.
// attributes for skip.
'skip' : {
}
},上から順に入力していきます。
ここにはグループ名をいれます。 [必須] まあ、わかれば何でもいいです。
'group' : 'Quotation-Link', とでも入れておきましょう。
グループ名を入れる<dt>と グループを入れる<dd>の CLASS属性を指定します。
とりあえずどうでもよく書いておきます。 'class' : 'list-group',
グループ (<dd>) の中の 各項目のリスト (<dd> > <dl>) につけるID属性を指定します。
一応つけますが、これもなきゃないでいいです。 'id' : 'quotation-link',
採取するタグの名前を書きます。 [必須]
'tag' : 'LINK|A', などのように書くと、 LINK要素とA要素を同時にピックアップします。
<q> もとりたいので、 'tag' : 'BLOCKQUOTE|Q', と書きます。
リンクのアドレス (href属性の値) になる、元の要素の属性名を書きます。 [必須]
'href' : 'href|src|cite', などのように書くと、 第一候補のhrefがなかった場合、 第二候補のsrc、 第三候補のcite、 と順番に検索していきます。
ここは<blockquote>なので、当然 'href' : 'cite', ですね。
項目名とする属性をここに書きます。
これを指定した場合は、各項目のリストは <DL>のリストになり、 指定しない場合は、 <OL>のリストになります。
また、指定した場合は、 この属性の値がない要素はスキップされ、リストに載りません。
これも 'term' : 'id|class|rel|rev', などのように書くと、順番に検索していきます。
ここでは指定しない設定にします。 'term' : '',
項目とする属性を書きます。
ソースで言うなら、
<a href="*">この属性の値</a>
となります。
この属性の値がないときは、
href属性の値が使いまわしされます。
しかしやっぱり、href属性じゃなんだかなあ…、なので、
なるべくtitle属性を書くクセをつけたいものです。
これも 'title' : 'title|alt|id|class', などのように書くと、順番に検索していきます。
まあだいたいは 'title' : 'title', とします。
スキップしたい要素の、属性名・属性値をペアで書きます。 たぶん一番わかりにくいです(笑)
例えば、<link>要素で、 スタイルシートの要素はスキップしたい、としたらば、 スタイルシートのtype属性はtext/cssなので、 'skip' : { 'type' : 'text/css' } と書けます。
で、もし、RSS の要素もスキップしたい、としたら、 先ほどスタイルシートにtype属性を使ってしまったから、 'skip' : { 'type' : 'application/rss+xml' } と書くことはできません。
つまり、text/css と application/rss+xml と 2つ書きたいので、そういうときは、次のように配列形式で書きます。 'skip' : { 'type' : ['text/css', 'application/rss+xml'] }
…という具合で、いくらでも設定できますが、 この中のひとつでもマッチしたらスキップされるのでご用心です。
また、 'skip' : { 'title' : '' } と書くことで、title属性がない場合は その要素をスキップできるようになりました。
長々書きましたが、結局 <blockquote> だと特にスキップしないので、書きません(笑) 'skip' : {}
ややこしいかもですが、
とりあえず
'group' と 'tag' と 'href'
だけは忘れずに書いてください。
あとはなきゃないで何とかなりますし、という具合。
このScriptで作られるHTMLソースは、仮想的に以下のようになります。
lin[*]、tag_list[*][*]、などは設定した値です。
<lin[tag] id="lin[id]"> - - - - - - - - - - List-Block
<lin[head_tag] id="lin[head_id]"> lin[head_text] </lin[head_tag]> (?)
<lin[list_tag] id="lin[link_id]"> - - - - - - - - List (?)
<dl>
<dt class="tag_list[*][class]"> - - - - - - List-Group
tag_list[*]
</dt>
<dd class="tag_list[*][class]">
<dl id="tag_list[*][id]"> (<ul>) - - - - List-Item
<dt>tag_list[*][term]</dt> (?)
<dd> (<li>)
<a href="tag_list[*][href]">
tag_list[*][title]
</a>
</dd> (</li>)
</dl> (</ul>) - - - - / List-Item
</dd> - - - - - - List-Group
</dl>
</lin[list_tag]> - - - - - - - - / List (?)
</lin[tag]> - - - - - - - - - - / List-Block