InputSetter
InputSetter
は、リストアイテムがクリックされたときに、droplabの範囲外のDOMを更新できるようにするプラグインです。
使用方法
DropLab.prototype.init
またはDropLab.prototype.addHook
呼び出しの plugins 配列にInputSetter
オブジェクトを追加します。
-
InputSetter
には設定値が必要です。input
とvalueAttribute
。 -
input
には操作したい DOM 要素を指定します。 -
valueAttribute
には、input
要素を更新する値を取得するために使用する、リスト項目の属性名を文字列で指定します。
また、InputSetter
の設定をオブジェクトの配列に設定することで、複数の要素を更新することができます。
<input id="input" value="">
<div id="div" data-selected-id=""></div>
<input href="#" id="trigger" data-dropdown-trigger="#list">
<ul id="list" data-dropdown data-dynamic>
<li><a href="#" data-id="{{id}}">{{text}}</a></li>
<ul>
const droplab = new DropLab();
const trigger = document.getElementById('trigger');
const list = document.getElementById('list');
const input = document.getElementById('input');
const div = document.getElementById('div');
droplab.init(trigger, list, [InputSetter], {
InputSetter: [{
input: input,
valueAttribute: 'data-id',
} {
input: div,
valueAttribute: 'data-id',
inputAttribute: 'data-selected-id',
}],
});
droplab.addData('trigger', [{
id: 0,
text: 'Jacob',
}, {
id: 1,
text: 'Jeff',
}]);
上記で、2番目のリスト項目がクリックされた場合、#input
要素のvalue
が1
に更新され、#div
要素のdata-selected-id
も1
に更新されます。
オプションとして、inputAttribute
に、更新したいinput
要素の属性名を文字列で指定することができます。inputAttribute
を指定しない場合、InputSetter
は、INPUT
要素であればinput
要素のvalue
を、INPUT
要素でなければinput
要素のtextContent
を更新します。