FC2ブログ
/// 解析系スクリプト ここから -->

ぷらぐいん ごー!ごー!

プラグインを作ってみない? (≧∇≦)b

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

直感カテゴリーツリーV2

直感カテゴリーツリーを、V2にバージョンアップしました。

最大の変更点は、従来の直感定義形式(管理画面でグループカテゴリーを追加)に加え、プラグインのHTML上でのグループ定義にも対応したことです。
HTML定義式でも直感と似た感じで比較的簡単に複数階層を定義できる目処が立った為で、決してカテゴリーツリーと直感カテゴリーツリーの2本をメンテナンスするのが面倒になったわけでは・・・(゜▽゜;)

特徴
�従来通りの直感的なグループ定義が可能
�HTML上でのグループ定義にも対応
 グループ定義用カテゴリーの追加が不要になります
�グループ、及びカテゴリーに説明バルーン追加可能
�グループ、及びカテゴリーに付加文字を追加可能
 カテゴリー名new! 等
�グループ、及びカテゴリーに個別クラスを設定可能
 CSSを利用してアイコンを付けたり色々できます

カスタマイズは、以下2つのモードに分けて記述します。
★直感モード
・プラグインのHTMLを修正するのに抵抗がある人
・グループ定義用カテゴリーの追加に抵抗がない人
向け

★定義モード
・プラグインのHTMLを修正するのに抵抗がない人
・グループ定義用カテゴリーを追加したくない人
向け

・直感モードの基本定義
・定義モードの基本定義
・拡張定義(両モード)
の順に記述するので、不要な部分は読み飛ばしても平気です。

※個人的には、HTML修正に抵抗がなければ、定義モードの方がいいと思います。
(カテゴリーやグループの追加、変更時の修正量も大差ない為)

カスタマイズ詳細

【直感モードの基本定義】
1.モード設定
kagCategoryMode=true; // true=直感モード,false=定義モード
true(直感モード)を指定します。

2.識別文字の指定
kagCategoryCntl=""; // 制御用の識別文字
グループ名を指定するカテゴリーの識別用文字です。
カテゴリー名で使用していない文字を指定してください。
変更する場合は、前後の"を消さないでください。

3.グループ定義の設定
直感カテゴリーツリーの2.カテゴリーグループ定義の追加を参照ください。

【定義モードの基本定義】
(注)HTMLを編集する場合には、"[ ],等に注意してください。
付け忘れると動かなくなる場合があります。

1.モード設定(直感モード/定義モード)
kagCategoryMode=false; // true=直感モード,false=定義モード
false(定義モード)を指定します。

2.グループ定義の設定
定義例
kagCategoryGroup =[
[3,"親グループ1",0,1],
  [2,"子グループ1",0,1],
    [0,"孫グループ1",5,0],
    [0,"孫グループ2",3,0],
[0,"親グループ2",3,0]
];
★注意
各定義の最後のカンマ(,)を忘れないでください。
また、最終定義の後にはカンマ(,)は不要です。(ブラウザーによってはエラーになることがあります。(2009/1/2追記)
例はわかり易くするため、字下げしてあります。

項目の説明
�子グループの数
[3,"親グループ1",0,1],
グループに属する子グループの数です。
子グループがない場合は、"0"を指定。
孫、ひ孫グループがある場合は、その数も含めます。

�グループ名称
[3,"親グループ1",0,1]
グループの名称
グループ名称を指定しない場合(例:[0,"",3,1])は、グループを作成せずに、そのままカテゴリーを展開します。

�グループに属するカテゴリー数
[0,"孫グループ1",5,0]
グループに属するカテゴリーの数です。
子グループ指定がある場合(�の数値が0でない場合)は、意味を持ちません。

�初期展開有無
[3,"親グループ1",0,1],
グループを、予め展開して表示するか、閉じて表示するかの設定
0:閉じて表示、1:展開して表示
子グループを展開指定した場合は、親グループを展開した時点で表示されます。

実際には下記のように定義した場合には、右図のように展開されます。
(わかりやすくするため、全て展開してあります)

定義例こちらの図
kagCategoryGroup =[                        
[16,"自作プラグイン",0,1],
  [0,"",2,0],
  [3,"個別プラグイン",0,1],
    [0,"カテゴリー表示系",5,0],
    [0,"リンク表示系",3,0],
    [0,"",3,0],
  [0,"",2,0],
[2,"ゲーム関連",0,0],
  [0,"シールオンライン",3,0],
  [0,"FF XI",0,0],
[0,"FC2",2,0],
[0,"",2,0]
]

直感モード/定義モードとも、上記の設定で最低限の動作をします。
以下は、必要に応じて変更してください。


【拡張定義】
1.グループに説明バルーンをつけたい
(注)定義モードでのみ可能です。
グループ定義を、以下のように拡張します。
[16,"自作プラグイン",0,1],

[16,"自作プラグイン",0,1,"赫映作のプラグインだよ"],
これでカーソルを合わせると説明のバルーンが表示されます。

2.グループ名に、new!等の文字を付加したい
グループ名に直接付加してください(´;ω;`)
�直感モードでの例
★自作プラグイン<span style="color:red">new!</span>★17,1
�定義モードでの例
[16,"自作プラグイン<span style="color:red">new!</span>",0,1]

3.各カテゴリーに、説明のバルーンや、文字を付加したい
直感モード/定義モードで共通です。
�まず、付加文字を定義します。
(バルーンのみの場合は不要です)
kagCategoryExtChar1 = "<span style='color:red'> new!</span>";
複数定義する場合は、変数名の最後の数字を増やしてください。(Char2等)

�付加情報テーブルを作成します。
kagCategoryOptions=[
[1,"カテゴリー1の説明",kagCategoryExtChar1],
[3,"カテゴリー3の説明",]
];
詳細
・カテゴリーの番号
[1,"カテゴリー1の説明",kagCategoryExtChar1],
バルーン、付加文字をつけたいカテゴリーの番号です。
カテゴリーの並び順に上から数えた番号です(1から始まる)
直感モードの場合には、グループ定義の制御用カテゴリーの数も含みます。

・バルーンの文言
[1,"カテゴリー1の説明",kagCategoryExtChar1],

・付加文字
[1,"カテゴリー1の説明",kagCategoryExtChar1],
複数のカテゴリーに同一文言を付加する場合には、このように定数化した方が簡単ですが、数が少ない場合には
[1,"カテゴリー1の説明","new!"],
と直接指定も可能です。
付加文字を先頭につけたい場合には
[1,"カテゴリー1の説明",kagCategoryExtChar1,1],
最後にカンマ(,)1を追加してください。

(その他例)
バルーンのみ指定する場合
[1,"カテゴリー1の説明"],

付加文言のみ指定する場合
[1,,kagCategoryExtChar1],
でOKです。

★注意事項
�バルーン、付加文字をつけたいカテゴリーのみ作成してください。
 この指定がないカテゴリーは、カテゴリー名がそのままバルーンになります。
�指定するエントリー番号は、必ず昇順(小さい順)に指定してください。
�定義モードの定義と同様に、最後のカンマに注意してください。
�不要な場合は、エントリーを削除してください。
kagCategoryOptions=[
];

カテゴリーの番号を直接指定する=カテゴリーを追加すると見直しが必要 になるため、あまり実用的ではないと思っています・・・(´;ω;`)

4.CSSで自由に操りたい
CSSのわかる人向けです。(直感モード/定義モード)
高度オプションの項目で制御できます。
�kagCategoryIcon = false;
trueに設定すると、各カテゴリーの先頭についているYUIアイコンが削除されます。
独自アイコンを使用する場合等に使えるかもしれません。
ま、├ が 一つ消える程度なのですが・・・
(注)子カテゴリーを持つグループのアイコンは削除されません。

�kagCategoryParentClass = false;
trueに設定すると、各グループ毎に独立したclassを設定します。
kagP1から始まり、順に数字が増えていきます。
グループを定義した順番です。
特定のグループのフォントや文字サイズを変更できます。

�kagCategoryChildClass = false;
trueに設定すると、各カテゴリー毎に独立したclassを設定します。
kagC1から始まり、順に数字が増えていきます。
実際に表示されるカテゴリーの順番です。
特定のカテゴリーのフォントや文字サイズを変更できます。


.kagP2{
font-size:large;
padding-left:15px;
background:url(alert.gif) no-repeat;
}
グループの2番を、文字サイズを大きくし、先頭にアイコンを付加します。

参考:
デフォルトの状態(上記設定がfalse)の場合のクラスは以下の通りです。
・グループ:ygtvlabel
・カテゴリー:ygtvhtml

【その他補足】
�スタイルシート宣言の<head>セクションへの移動
正しいhtml4.01では、スタイルシートの宣言が<body>セクションに存在することを認めていません。
(現在はプラグインの簡便性の為に、敢えてbodyにおいてあります)

YUI関連スクリプトの二重設置チェック
YUIを使用しているプラグインを他にも使用していませんか?
その場合は、スクリプトの引用宣言を<head>セクションに移動してください。
(YUIスクリプトを二重設置している場合に、上手く動かなくなるケースがあるようです)

対象部位は、下記の部分です。
<link rel="stylesheet" type="text/css" href="http://blog-imgs-41.fc2.com/d/u/m/dummytop/treeview.css>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"> </script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"> </script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/treeview/treeview-min.js"> </script>

古いバージョンのプラグインの場合にも、最新バージョンに合わせれば問題ないはずです(多分)
注:2.5.2だと、二重設置でもエラーにならないようです・・・ヨカッタ

�スタイルシートの自ブログへのアップロード
現在は、dummytop.blog114.fc2.comのスタイルシートを参照していますが、このままだとblog114.fc2.comサーバが障害になった場合に影響を受けることがあります。
自分のブログに移動しておくと安心です。
この場合は、 src="file/treeview.css" でOKです。
ダウンロード用ファイルはこちら
スタイルシート
アイコン画像

�スタイルシートを変更したい場合は、コメント付のこちらを使用してください。


直感カテゴリーと通常のカテゴリーツリーを統合するに当たり、欲張って色々付けてみました。
おかげで、定義そのものよりも説明がわかりにくくなってしまいましたが・・・

今後少しずつ見直していきます。

【2009/6/30追記】
�のアップロード用ディレクトリーは各自で異なる可能性があるので、よく調べて、用量・用法を守った上で正しくお使いください。

トラックバック

http://dummytop.blog114.fc2.com/tb.php/73-65106e26

 | HOME | 

メニュー

最近の記事

最近のコメント

ブログ内検索

リンク

プロフィール

dummytop

中の人:dummytop
趣味はソフトウェア開発

上記の画像はあくまでイメージ
であり、実在する本人とは一切
関係ありません (´;ω;`)

管理画面

RSSフィード

伸縮式リンクリストV1.1

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。