pukiwikiプラグイン:divregion のバックアップの現在との差分(No.4)

お名前:


  • 追加された行はこの色です。
  • 削除された行はこの色です。
表記、そんな感じのものを作ったので、一応公開しておきます。~

*プラグイン概要 [#gd3f34df]

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

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


*インストール方法 [#ea36a033]
+本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダにおいてください。
--[[divregion.php.inc>http://tomose.dynalias.net/junk/index.php?plugin=attach&pcmd=open&file=divregion.inc.php&refer=pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%A1%A7divregion]]
--[[divregion.php.inc>http://tomose.dynalias.net/junk/index.php?plugin=attach&pcmd=open&file=divregiona.inc.php&refer=pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%A1%A7divregion]]
--[[enddivregion.php.inc>http://tomose.dynalias.net/junk/index.php?plugin=attach&pcmd=open&file=enddivregion.inc.php&refer=pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%A1%A7divregion]]
+使用しているスキンの cssファイルを編集し、以下のクラスを定義してください。
--div.divregion 標準でのヘッダ行
--div.divregion_contents 標準での本文部分
--div.divregion_h1  h1指定時のヘッダ行
--div.divregion_h2  h2指定時のヘッダ行
---参考までに、本Wikiで使用している css記述は以下です。~
#divregion(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;
 }
#enddivregion


*使い方 [#pececf91]
regionプラグイン同様に、divregion と enddivregion とで本文を挟み込むように記載します。

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

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

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

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

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

*技術的な話。 [#a60b7cf5]

このプラグインは、単純にいうと以下のような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 を非表示。~




*コメント [#p7a8c88f]
ご意見などがあれば。
#comment2(below)

お名前: