折り畳み拡張プラグインテスト

ANA-NOTE管理者が用意した、折り畳み(文等の表示＆表示隠し)用の拡張プラグインのテスト&サンプルページです。以下のような注意点があります。

• 折り畳みを実現するのにJavaScriptを利用しているので、ブラウザでのJavaScript利用をオフにしていると動きません
• IDに日本語が含まれていると、Mac版Internet Explore 5.2.3では上手く稼働しないかもしれません

管理者の環境(Mac OS-X版Firefox、Safari1&2、IE5.2.3、iCab3.0.3)ではとりあえず問題ありませんでしたが、もしも不具合あったら、ページ下のコメントフォームに書いて下さい。

折り畳みの基本

折り畳みの必要性は、正直あまり無いかもしれません(^^;)。折り畳みをしても、読み込み量は変わりませんし、あったとしても大して使うものでも無いので。まあでも、利用の仕方、させ方次第ではページを見るのに有益に使えるでしょう。

折り畳みを実現するには、「折り畳む対象」と「折り畳むスイッチ」が必要です。

以下で説明していきますが、「折り畳む対象」は様々です。折り畳む対象にはそれぞれIDがふられています。インクルード(内包表示)した他ページやサイドメニューに同じIDのものが存在すると、oritatamiプラグインの配置位置によっては上手く動かない可能性があります。

一方、「折り畳むスイッチ」には、「oritatami」という拡張プラグインのみを利用します。このプラグインで折り畳む対象(ID)を指定すれば、それを折り畳むスイッチになります。

• プラグイン構文

 {{oritatami 対象ID(省略可),表示テキスト(省略可),サウンド(省略可)}}

• 対象IDは省略すると「id-or」になります
• 表示テキストは省略すると「クリックで表示／非表示」になります
• サウンドは省略すると折り畳みクリック時click.wavが鳴ります。URLで指定するとその音を鳴らす事が出来ます。「off」とすると音無しとなります

「アウトライン」の折り畳み

• 折り畳み対象：アウトライン (見出し一覧)
• 利用するプラグイン：outline
• 対象の(DIV) ID：outline
• 改造したファイル：core.pl
• 説明：core.plを改造して、outlineにDIVタグIDを付けました。oritatamiプラグインでID「outline」を指定する事で、アウトラインの折り畳みが可能です。
  • また、outlineプラグインの第二の引数(第一の引数はページ名)を「none」と指定する事で、最初はアウトラインを非表示にしておく事も可能です。

例

 {{oritatami outline,アウトライン折り畳み(クリックで表示・非表示)}}
 
 {{outline 折り畳み拡張プラグインテスト,none}}

アウトライン折り畳み(クリックで表示・非表示)

「div_s＆div_eプラグインで挟んだ部分」の折り畳み

• 折り畳み対象：一応何でも可能?
• 利用するプラグイン：div_s、div_e
• 対象の(DIV) ID：自由に設定可能
• 改造したファイル：plugin1.pl ext_naoto.pl
• 説明：この方法を使うにあたり、絶対注意して貰いたい事があります。 それは「必ずdiv_s、div_eプラグインを対で使う」事です。そうしないと、表示がおかしくなる可能性があります。
  • 折り畳みしたい部分の始めにDIV開始タグプラグイン「div_s」を設置、折り畳みしたい部分の最後にDIV終了タグプラグイン「div_e」を設置します。そして「div_s」プラグインで設定したIDをoritatamiプラグインで指定する事で、「div_s」と「div_e」に囲まれた範囲の折り畳みが可能となります。
  • 「div_s」プラグインでは、「div」プラグインのように属性、属性値を指定し、更にIDを引数で指定出来ます。折り畳みで利用する場合は、属性に「style」、属性値には最初表示させたいなら「display:block」、最初表示させたくないなら「display:none」と指定します。
  • 「div_e」プラグインはただ最後に書くだけです。
  • 「div_s」プラグインは実際には以下のような感じで指定します。

 {{div_s 属性,属性値,ID}}
 {{div_s style,display:block,ID}}　通常指定(表示)
 {{div_s style,display:none,ID}}　通常指定(非表示)
 {{div_s display,block,ID}}　簡易指定(表示)
 {{div_s display,none,ID}}　簡易指定(非表示)

例

 {{oritatami part1}}　指定IDは「part1」
 
  {{div_s display,none,part1}}
 
 ここの部分が表示／非表示されます。
 
 {{div_e}}

クリックで表示／非表示

「整形済テキスト」の折り畳み

• 折り畳み対象：整形済テキスト
• 対象の(DIV) ID：pre、pre＋数字
  • ページ中、最初の整形済テキストのID：pre
  • ページ中、二番目の整形済テキストのID：pre1
  • ページ中、三番目の整形済テキストのID：pre2　・・・以下同様に1ずつ増える
• 改造したファイル：common.pl
• 説明：common.plを改造して、整形済テキスト(pre)にDIVタグIDを付けました。oritatamiプラグインでID「pre」を指定する事で、整形済テキストの折り畳みが可能です。
  • ページ内に整形済テキストが一つだけで、それが折り畳み対象ならID「pre」を指定すれば良いですが、もしも複数の整形済テキストが配置されていて、最初の整形済テキスト以外を折り畳みたい場合、整形済テキストそれぞれに異なって付けられたIDを指定する必要があります。
    • 複数の整形済テキストがページ内にある場合、ページの頭から二番目以降の整形済テキストのDIV IDは「pre＋数字」(例pre1)という風になります。正確なIDを調べるには、ページ完成後にページのhtmlソースを見て探すのが良いでしょう(id="〜"という形で書かれている)。
    • ページ内に既にある整形済テキストよりも前(上)に新たに整形済テキストを加えるとIDがずれて変わってしまうので、その点留意しておいて下さい。

例

 {{oritatami pre5}}
 
 これは整形済テキストです。
 http://www.google.co.jp/　URLもリンクになりません

クリックで表示／非表示

 これは整形済テキストです。
 http://www.google.co.jp/　URLもリンクになりません

「リスト」の折り畳み

• 折り畳み対象：リスト
• 対象の(DIV) ID：list、list＋数字、olist、olist＋数字
  • ページ中、最初のリストのID：list、olist
  • ページ中、二番目のリストのID：list1、olist1
  • ページ中、三番目のリストのID：list2、olist2　・・・以下同様に1ずつ増える
• 改造したファイル：common.pl
• 説明：common.plを改造して、リスト(list)、番号付きリスト(olist)にDIVタグIDを付けました。oritatamiプラグインでIDを指定する事で、リストの折り畳みが可能です。
  • ページ内にリストが一つだけで、それが折り畳み対象ならID「list」を指定すれば良いですが、もしも複数のリストが配置されていて、最初のリスト以外を折り畳みたい場合、リストそれぞれに異なって付けられたIDを指定する必要があります。
    • 複数のリストがページ内にある場合、ページの頭から二番目以降のリストのDIV IDは「list(もしくはolist)＋数字」(例list1)という風になります。正確なIDを調べるには、ページ完成後にページのhtmlソースを見て探すのが良いでしょう(id="〜"という形で書かれている)。
    • ページ内に既にあるリストよりも前(上)に新たにリストを加えるとIDがずれて変わってしまうので、その点留意しておいて下さい。

例

 {{oritatami list15}}
 
 *項目1-1
 **項目2-1
 ***項目3-1
 *項目1-2
 **項目2-2

クリックで表示／非表示

• 項目1-1
  • 項目2-1
    • 項目3-1
• 項目1-2
  • 項目2-2

 {{oritatami olist}}
 
 +番号付き項目1
 ++番号付き項目1-1
 +番号付き項目2
 +番号付き項目3

クリックで表示／非表示

1. 番号付き項目1
   1. 番号付き項目1-1
2. 番号付き項目2
3. 番号付き項目3

「テーブル」の折り畳み

• 折り畳み対象：テーブル
• 対象の(div) id：wikitable、wikitable＋数字
  • ページ中、最初のテーブルのID：wikitable
  • ページ中、二番目のテーブルのID：wikitable1
  • ページ中、三番目のテーブルのID：wikitable2　・・・以下同様に1ずつ増える
• 改造したファイル：common.pl、_ex_table.pl
• 説明：common.plと_ex_table.plを改造して、テーブルにdivタグIDを付けました。oritatamiプラグインでIDを指定する事で、テーブルの折り畳みが可能です。
  • ページ内にテーブルが一つだけで、それが折り畳み対象ならID「wikitable」を指定すれば良いですが、もしも複数のテーブルが配置されていて、最初のテーブル以外を折り畳みたい場合、テーブルそれぞれに異なって付けられたIDを指定する必要があります。
    • 複数のテーブルがページ内にある場合、ページの頭から二番目以降のテーブルのDIV IDは「wikitable＋数字」(例wikitable1)という風になります。正確なIDを調べるには、ページ完成後にページのhtmlソースを見て探すのが良いでしょう(id="〜"という形で書かれている)。
    • ページ内に既にあるテーブルよりも前(上)に新たにテーブルを加えるとIDがずれて変わってしまうので、その点留意しておいて下さい。

例

 {{oritatami wikitable}}
 
 ,1-1,1-2,1-3
 ,2-1,2-2,2-3

クリックで表示／非表示

「テキストエリア」の折り畳み

• 折り畳み対象：textarea (テキストエリア)
• 利用するプラグイン：textarea
• 対象の(DIV) ID：textarea、textarea＋任意文字
• 改造したファイル：ext_io.pl
• 説明：入力不可のテキストエリアを設置出来るtextareaプラグインで生成されるtextareaにもIDを付けました。oritatamiプラグインでID「textarea」を指定する事で、textareaの折り畳みが可能です。
  • また、textareaプラグインの第四の引数に任意文字を設定すると、ID「textarea＋任意文字」となり、styleも「display:none」となって、表示最初はtextareaが非表示の状態になります。

例

 {{oritatami textareatest}}
 
 {{textarea こんな風に文章が表示されます,5,20,test}}

クリックで表示／非表示

「divプラグイン」の折り畳み

• 折り畳み対象：div
• 利用するプラグイン：div
• 対象の(DIV) ID：自由に設定可能
• 説明：「BugTrack-plugin/117」ext_naoto.plの導入によって、div拡張プラグインが使用可能になっていて、そのプラグインで属性を「id」に、属性値を任意のID名に設定して、oritatamiプラグインでそのID名を指定する事で、折り畳みが可能です。

例

 {{oritatami div-test}}
 
 {{div id,div-test,この文字が消えます。}}

クリックで表示／非表示

「spanプラグイン」の折り畳み

• 折り畳み対象：span
• 利用するプラグイン：span
• 対象の(DIV) ID：自由に設定可能
• 説明：「BugTrack-plugin/117」ext_naoto.plの導入によって、span拡張プラグインが使用可能になっていて、そのプラグインで属性を「id」に、属性値を任意のID名に設定して、oritatamiプラグインでそのID名を指定する事で、折り畳みが可能です。
  • divとの違いは、spanの方は設置自体はインラインに対応している事です。文字と文字の間に置いて、その部分を表示したり消す事が可能です (ただし、表示時にblock要素にしてしまうので、表示／非表示を使うと勝手に改行されてしまいます)。

例

 {{oritatami span-test}}
 
 前の文字は消えません。{{span id,span-test,この文字は消えます。}}後ろの文字も消えません。

クリックで表示／非表示

前の文字は消えません。この文字は消えます。 後ろの文字も消えません。

「外部ページ」の折り畳み

• 折り畳み対象：ori_include (インクルードした外部ページ)
• 利用するプラグイン：ori_include
• 対象の(DIV) ID：自由に設定可能
• 改造したファイル：plugin1.pl
• 説明：「BugTrack-plugin/112」plugin1.plの導入によって、他のページをインクルード(内包表示)出来る「include」拡張プラグインが使用可能になっていますが、折り畳み用にDIV IDと表示(block、none)も設定出来る「ori-include」拡張プラグインを追加しました。ori-include拡張プラグインでDIV IDを設定し、oritatamiプラグインでそのIDを指定する事で、インクルードした部分の折り畳みが可能です。
  • これを上手く使えば、ページやパラグラフ(見出しから見出しまでの1段落)に含まれる任意の部分を折り畳みする事が可能です。

例

 {{oritatami id-or}}
 
 {{ori_include リンク for Menu, ,id-or,none}}

クリックで表示／非表示

「フッタ、サイドメニュー(バー)」の折り畳み

• 折り畳み対象：footer(フッタ)、sidebar(サイドメニュー)
• 対象の(DIV) ID：footer、sidebar
• 改造したファイル：common.pl
• 説明：common.plを改造して、フッタ、サイドメニュー(バー)にDIVタグIDを付けました。oritatamiプラグインでID「footer」「sidebar」を指定する事で、それぞれの折り畳みが可能です。

例

 {{oritatami sidebar,サイドバー折り畳み(クリックで表示・非表示)}}

サイドバー折り畳み(クリックで表示・非表示)

 {{oritatami footer,フッタ折り畳み(クリックで表示・非表示)}}

フッタ折り畳み(クリックで表示・非表示)

組み合わせて階層メニュー風に

 {{oritatami parag2,▼}}
 {{div_s display,none,parag2}}
 *http://www.google.co.jp/
 *[[FrontPage]]
 *{{oritatami parag3,▼}}
 {{div_s display,none,parag3}}
 **http://www.google.co.jp/
 **[[FrontPage]]
 {{div_e}}
 {{div_e}}

▼

コメント