pukiwikiプラグイン：divregion のバックアップ(No.6)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• pukiwikiプラグイン：divregion へ行く。
  • 1 (2016-07-30 (土) 09:46:22)
  • 2 (2016-07-30 (土) 10:17:39)
  • 3 (2016-07-30 (土) 10:17:39)
  • 4 (2016-07-30 (土) 10:17:39)
  • 5 (2016-08-17 (水) 14:31:34)
  • 6 (2016-08-28 (日) 16:50:25)

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

プラグイン概要 †

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

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

インストール方法 †

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

       div.divregion{
       	background-color:#FF00000;
       	color:gray;
       	border:gray 1px solid;
       }
       div.divregion_contents{
       	border-bottom: solid 1px #666e99;
       }
       div.divregion_h1{
       	color:white;
       	background-color:#666e99;
       	padding:1px 4px;
       }
       div.divregion_h2{
       	border-bottom: solid 1px #666e99;
       	border-left: solid 10px #666e99;
       }

使い方 †

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 を非表示。

コメント †

ご意見などがあれば。