※コードの全体的なイメージは「ダウンロード/ライブラリの設置」のページを参照してください。

 

UIの外観はNakatoji UI ライブラリが自動的に対応しますが、ボタン内に配置されたアイコンなどは自力で対応しなければなりません。

 

まずは、初期表示のときにテーマカラーに合わせた対応をとります。以下の例はサンプルプロジェクト(ダウンロード)のものです。

var btIcon = nakatojiLib.getBgColor() == "dark" ? "icon_ps_dk.png" : "icon_ps_br.png";
nakatojiLib.addCntl("button", [10, 10], [21, 120], {
    name: "button1",
    text: " Send script",
    icon: "./icons/" + btIcon
});

nakatojiLibオブジェクト(ライブラリ内)のgetBgColor関数は 、現在のテーマカラーを返します。ダーク系なら「dark」、ブライト系なら「bright」と返ります。

 

更新のタイミングは他のUIのイベントと同じくntEventHandler関数で受け取りますが、デフォルトではこのイベントの発生がオフになってますので、あらかじめライブラリ初期化時にotherEventsオプションでこれをオン(true)にします。

nakatojiLib.init({
    otherEvents: true,
});

 

イベントは前述の通りntEventHandler関数で受け取ります。以下の例はサンプルプロジェクトのものです。

function ntEventHandler(objName, event, detail) {
    switch (objName) {
        case "themaColor":
            btIcon = detail == "dark" ? "icon_ps_dk.png" : "icon_ps_br.png"; //変更されたテーマカラーに応じて
            nakatojiLib.ctrlDB["button1"].replaceContents({
                text: " Send script",
                icon: "./icons/" + btIcon
            });
            break;
    }
}

引数「objName」が「themaColor」を受け取ったときが変更のタイミングです。

テーマの種類は「detail」を参照します。ダーク系なら「dark」、ブライト系なら「bright」となっていますので、適宜それに対応します。

 

 

Joomla templates by a4joomla