自作プラグイン/switch
2024-09-09 (月) 22:46:53
 |
操作によって表示内容を切り替えるプラグイン
| switch.inc.php | |
|---|---|
| 製作者 | kanateko |
| ライセンス | GPLv3 |
| バージョン | 1.0.1 |
| 動作確認 | PukiWiki 1.5.4 - 1.5.4 |
| 最終更新 | 2024-09-09 |
inputのrangeやselectで選択した値に応じ、同じグループに属する他の要素の表示を切り替える。同一ページ内に複数のグループを設置して別々に操作することが可能。
selectプラグインの拡張版であり、変則的なtabプラグインとも言える。
- ユーザーが選択した値に応じ、同じグループに属する他の要素の表示を切り替える。
- 操作にはinputのrangeかselectが使える。
- 複数グループを同一ページ内に配置可能。
- インライン型で文中やテーブル内に配置したり、ブロック型で段落丸ごと表示を切り替えたりできる。
- ブロック型ではマルチラインプラグインの入れ子も可能。
ダウンロード
最新: GitHub
| 日付 | バージョン | 備考 |
|---|---|---|
| 2024-09-09 | 1.0.1 |
|
| 2024-08-25 | 1.0.0 |
|
セットアップ
- ダウンロードした「plugin-switch」の中身 (skinフォルダとpluginフォルダ) をPukiWikiのディレクトリに放り込む。
- pukiwiki.ini.phpを編集してマルチラインプラグインを許可する。
- define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); // 1 = Disabled
+ define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
プラグイン設定
| グローバル (PLUGIN_SWITCH_~) | 型 | 初期値 | 説明 |
|---|---|---|---|
| CSS | string | SKIN_DIR . 'css/switch.min.css' | CSSのパス |
| JS | string | SKIN_DIR . 'js/switch.min.js' | JSのパス |
| PluginSwitchBaseクラス (インライン) | |||
| DEFAULT_CLASS | string | 'plugin-switch' | デフォルトのクラス名 |
| DEFAULT_GROUP | string | 'default' | デフォルトのグループ名 |
| DEFAULT_HTML_TAG | string | 'span' | 表示タイプdefaultで使用するHTMLタグ |
| DEFAULT_SEPARATOR | string | ':' | デフォルトのセパレータ (表示要素の切り分け) |
| DEFAULT_TYPE | string | 'default' | デフォルトの表示タイプ |
| DEFAULT_RANGE_ATTRS | array | [1, 10, 1] | デフォルトのrangeスライダーの属性 (min, max, step) |
| PluginSwitchMLクラス (ブロック) | |||
| DEFAULT_HTML_TAG | string | 'div' | 表示タイプdefaultで使用するHTMLタグ |
| DEFAULT_SEPARATOR | string | '#-' | デフォルトのセパレータ (表示要素の切り分け) |
使用方法
&switch([オプション]){ 表示要素1 : 表示要素2 : 表示要素3 : ... };
#switch([オプション]){{
表示要素1
#-
表示要素2
#-
表示要素3
#-
︙
}}
基本的な使い方は上のようになるが、表示形式にrangeを指定した場合のみ表示要素の書き方が異なる。
&switch(range){ [min] : [max] : [step] };
例：&switch(range){ 1 : 5 : 1 }; // 1から5まで1ずつ進む
オプション
- group =
- グループ名。指定しない場合はデフォルトのグループ名が適用される。また、全てのオプションに当てはなまらない引数もグループ名として認識される。
- type =
- 表示形式。defaultで通常表示 (span/div) 、rangeでスライダー、selectでプルダウンになる。指定しない場合はデフォルト設定が適用される。rangeとselectは"type="なしでも指定できる。
- start =
- 初期状態で表示する要素の番号。1から始まる。指定する場合はグループ名の指定よりも後で指定し、また同グループで最初のプラグイン内で指定する必要がある。
- eparator =
- 表示要素を切り分けるためのセパレータを変更する。表示要素内に":" (コロン) を使いたい時用。
- label =
- rangeとselectの左にラベルを表示する。deufaultでは無視される。
- class =
- 追加のクラス名を指定する。現状ラベルやrangeの数字表示には適用されない。
- slider-width =
- スライダーの幅 (長さ) を数字で指定する。単位がない場合はpx扱い。
- transparent
- プルダウンの枠や背景を透明にする。
- rtl
- プルダウン内のテキスト表示を右から開始させる。どうしてもテキスト (主に数字) を右寄せにしたい時用。
- disable
- プルダウンを操作不能にする。
使用例
インライン表示1インライン表示2インライン表示3
ブロック表示
&switch(test,range,start=2,label=スライダー){1:3};
&switch(test,select,separator=|,label=プルダウン){選択肢1|選択肢2|選択肢3};
&switch(test){''インライン表示1'':&color(red){インライン表示2};:インライン表示3};
ブロック表示
#switch(test){{{
#flex(gap=12,left){{
&ref(../swiper/1.webp,360x);
#-
&ref(../swiper/1.webp,360x);
}}
#-
&ref(../swiper/2.webp,360x);
#-
&ref(../swiper/3.webp,360x);
}}}
備考
- select用のオプションはselectプラグインとの互換用で実際あまり使う機会はないと思われる。互換とは言っても表示要素を書く位置が違うので結局そまま置き換えることはできないが。
- デフォルトのセパレータをselectプラグインから変えたのは、"|"だとテーブル内で記述できなかったため。
- グループ内で表示要素の数が合っていなくても特にエラーは出ないが、基本的に推奨はしない。
コメント
コメントはありません。 コメント/自作プラグイン/switch