← オブジェクトリファレンスに戻る

createCss2Button

概要

• 座標、サイズ、フォントなどを設定したボタンを作成する。
• 従来の関数createCssButtonで使用できる属性値に加え、CSSに対応した属性名に対応する設定が行える。
• この関数を呼び出しただけではボタンは作成されない。
  返却されたdiv要素を(親div要素のid).appendやmultiAppend関数などで追加する必要がある。

引数（括弧内はデフォルト値）

オブジェクト引数

• オブジェクト引数は全て任意。指定が無い場合はデフォルト値が採用される。
• CSS属性名については、div要素で使えるCSS属性が一通り使用できる。
  下記の例ではリストに無いborderStyleが指定されているが、CSS属性には存在するため指定が可能。
  他にも、opacityやpointerEvents, displayといった項目が利用できる。

spriteList.scroll.appendChild(
    createCss2Button(`btnReverse`, `${g_lblNameObj.Reverse}:${g_stateObj.reverse}`, evt => setReverse(evt.target), {
        x: 160, y: 0, w: 90, h: 21, siz: C_SIZ_DIFSELECTOR,
        borderStyle: `solid`,
        cxtFunc: evt => setReverse(evt.target),
    }, g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.reverse}`])
);

返却値

• この関数で作成したボタン（div要素）

使用例

• _obj内の要素については未指定の場合、デフォルトの値が適用される。

divRoot.appendChild(
    createCss2Button(`btnKeyConfig`, `KeyConfig`, _ => {
        // ボタン処理エリア
        g_kcType = `Main`;
        clearWindow();
        keyConfigInit();
    }, {
        // CSSデザイン系変更エリア
        x: g_sWidth / 3,
    }, g_cssObj.button_Setting)   // CSSクラス
);

spriteList.scroll.appendChild(
    createCss2Button(`btnReverse`, `Reverse:${g_stateObj.reverse}`, evt => {
        setReverse(evt.target);
    }, {
        x: 160, y: 0,
        w: 90, h: 21, siz: C_SIZ_DIFSELECTOR,
        borderStyle: `solid`,
        cxtFunc: evt => setReverse(evt.target),
    }, g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.reverse}`])
);

関連項目

• commonKeyDown
• g_btnAddFunc / g_cxtAddFunc
• g_btnDeleteFlg / g_cxtDeleteFlg
• g_btnWaitFrame

更新履歴