a-blog cmsのユニットでテーブルユニットというテーブル用の便利ユニットがあります。
今回はテーブルユニットの装飾項目を増やす場合の手順を紹介します。
装飾項目はJavaScriptで追加可能です。
全体で読み込んでいるJSファイルに次の形で追加します。
追加方法
.push()
で項目の追加 [ ]
で項目の再定義が可能です。
//セルの装飾項目
ACMS.Config.aTableSelector.push({
"label": "ラベル名",
"value": "クラス名"
})
ACMS.Config.aTableSelector = []
//テーブルの装飾項目
ACMS.Config.aTableOption.push()
ACMS.Config.aTableOption = []
label
は表示される項目名です。
value
はクラス名です。複数指定したい場合は半角スペースの後に続けて記入します。
使用例
ACMS.Ready(function() {})
の中に記述します。
ACMS.Ready(function() {
//セルの装飾項目
ACMS.Config.aTableSelector.push({
"label": "改行させない",
"value": "is-nowrap"
});
//テーブルの装飾項目
ACMS.Config.aTableOption = [
{
label: "テーブル",
value: "table"
},
{
label: "縦線なし",
value: "table is-table-borderless"
},
{
label: "SP時ブロック",
value: "table is-table-sp-block"
},
{
label: "SP時スクロール",
value: "table is-table-scrollable acms-table-scrollable "
}
];
})
});
画像のように項目が増えたと思います。
JavaScriptのオプション追加で設定を変更できるのはうれしいですね。
テーブルユニットの項目を追加したい場合は参考にしてみてください。
テーブルユニットについて詳しくはマニュアルをご覧ください。
テーブルユニット
関連するタグ
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。