pukiwikiプラグイン:divregion

2016-08-28 (日) 16:50:25 (1179d)
お名前:

表記、そんな感じのものを作ったので、一応公開しておきます。

プラグイン概要

他の方が作った「region.php.inc」「endregion.php.inc」をもとに改造したプラグインです。
この既存プラグインが html的には table を利用して実現していたのに対して、本プラグインは div によって実現しています。
正直見た目対応です:table はいろいろとレイアウト問題がありますので。

pukiwiki Ver.1.4x系対応。マルチライン対応はしていません。

インストール方法

  1. 本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダにおいてください。
  2. 使用しているスキンの cssファイルを編集し、以下のクラスを定義してください。
    • div.divregion 標準でのヘッダ行
    • div.divregion_contents 標準での本文部分
    • div.divregion_h1 h1指定時のヘッダ行
    • div.divregion_h2 h2指定時のヘッダ行
      • 参考までに、本Wikiで使用している css記述は以下です。
        ▼CSS例

使い方

regionプラグイン同様に、divregion と enddivregion とで本文を挟み込むように記載します。

#divregion(タイトル)
本文
#enddivregion

上記記載により、以下のような表示となります。タイトル部分をクリックすることで、折り畳みが開閉されます。

▼タイトル

パラメータ

divregion には、以下のパラメータを使うことができます。

  • open, close
    • region プラグインにもあった、折り畳みの初期状態を指定することができます。
      省略は「close」と同じです。
  • h1,h2
    • タイトル部分に、別スタイルを適用できます。
    • h1 指定の例
      #divregion(タイトル,h1)
      本文
      #enddivregion
      ▼タイトル
    • h2 指定の例
      #divregion(タイトル,h2)
      本文
      #enddivregion
      ▼タイトル
  • color:#xxxxx, background-color:#xxxxxx
    • スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更できる。
    • xxxxxは16進(0-9,A-F)指定。「Red」などの文字指定はできない。

    • #divregion(タイトル,color:#FF0000,background-color:#dddddd)
      本文
      #enddivregion
      ▼タイトル

技術的な話。

このプラグインは、単純にいうと以下のようなHTMLを構築するものです。

  • divregion が生成するのは・・・
    <div class=divregion_closed> 
    ▼タイトル ←閉じたときのタイトル行。
    </div>
    <div class=divregion_opened> 
    ▲タイトル ←開いたときのタイトル行
    </div>
    <div class=divregion_content> 
    本文 ←本文
  • enddivregion が生成するのは・・・
    </div>

開閉は JavaScript で実施。
dicregion_closed がクリックされたら、 closed を非表示、opened と content を表示。
dicregion_opened がクリックされたら、 closed を表示、opened と content を非表示。

コメント

ご意見などがあれば。


お名前:

お名前: