Headline Desing
セレクトポップアップ
//オプションは、jsonで指定
nJa_.tpl.hdlhdlhdllist = [
{"txt":'ベタ塗り見出し',"value":"hdl-bg",},
{"txt":'右上がり見出し',"value":"hdl-up",},
{"txt":'囲い枠見出し',"value":"hdl-wrap",},
{"txt":'吹き出し見出し',"value":"hdl-fuki",},
{"txt":'吹き出し(ベタ塗り)見出し',"value":"hdl-fukibg",},
{"txt":'吹き出し(ライン)見出し',"value":"hdl-fukiline",},
{"txt":'ライン見出し',"value":"hdl-line",},
{"txt":'左ライン見出し',"value":"hdl-lb",},
{"txt":'左ライン(W)見出し',"value":"hdl-lbw",},
{"txt":'インパクト見出し',"value":"hdl-bigccl",},
{"txt":'飾り見出し',"value":"hdl-wccl",},
{"txt":'飾り見出し2',"value":"hdl-sqsq",},
];
const promise1 = new Promise((resolve, reject) => {
//セレクトボックス生成して挿入
//挿入先は、class:"d-none"
//要素内に直接作成しておいてもOK?nja用に特化して作ったので汎用性が低い
document.getElementById('headlinetpl').appendChild(nJa_.func.arytoSelect(nJa_.tpl.hdlhdlhdllist,{id:"headtpl",name:"headtpl",class:"d-none",}));
//おまけ:カラー変更
document.getElementById('headlinecolor').innerHTML = nJa_.tpl.colorselect;
resolve();
});
promise1.then((value) => {
//セレクトボックスをkite化
$('#headtpl').nJa_kite({
before: function(){
let $color = document.getElementById('headlinetpl').getAttribute('data-color');
document.querySelector('[data-select_id="headtpl"]').classList.add($color);
}
});
//おまけ:カラー変更
document.getElementById('headlinecolor').innerHTML = nJa_.tpl.colorselect;
nJa_.func.changeTargetColor('#headlinecolor [name=box-color]','#headlinetpl');
});
jquery selmodal
jquery selmodal
/js/Jquery.selmodal.js
$(function(){
$('#select').selModal();
});