DOM要素に対する機能2 - adiary開発マニュアル

"js/src/45_dom-special.js"の機能です。このファイルでは、DOM要素に対する加工を含みます。

フォーム値の保存

<input class="js-save" type="text" id="save-test1" value="書き換えてください">
<label><input class="js-save" type="checkbox" id="save-test2">チェック！</label>
<select class="js-save" id="save-test3"><option value="1">1<option value="2">2<option value="3">3</select>

チェック！

要素のIDやnameに関連付けて値を保存します。値はブラウザのローカルストレージに保存されます。

Ver3.32から type="radio" に対しても有効です。

フォーム操作のenable/disalbe

<label><input type="checkbox" class="js-enable"  data-target="#mybutton1">ボタンを有効にします</label>
<button id="mybutton1">ボタン</button>
<label><input type="checkbox" class="js-disable" data-target="#mybutton2">ボタンを無効にします</label>
<button id="mybutton2">ボタン</button>

ボタンを有効にします

ボタンを無効にします

checkedが変更された時、targetを有効/無効にします。ボタン以外の要素に指定した場合は、value が空（""）であるかどうかで判断されます。

radioの場合だけやや特殊になります。サンプルから解読してください。

<label><input type="radio" name="radio1" class="js-enable" data-state="0" data-target="#r-target" checked>レモン</label>
<label><input type="radio" name="radio1" class="js-enable" data-state="1" data-target="#r-target">スイカ</label>
<label><input type="radio" name="radio1" class="js-enable" data-state="1" data-target="#r-target">パイナップル</label><br>

レモン以外の人は記入してください <input type="text" id="r-target">

レモンスイカパイナップル
レモン以外の人は記入してください

Ver3.02からjs-enableまたはjs-disableの同じクラスからならば、同一targetを重複できるようになりました。

-<button id="disX">どれか一つで無効化</button>
--<label><input type="checkbox" class="js-disable" data-target="#disX">無効A</label>
--<label><input type="checkbox" class="js-disable" data-target="#disX">無効B</label>
--<label><input type="checkbox" class="js-disable" data-target="#disX">無効C</label>
-<button id="enaX">どれか一つで有効化</button>
--<label><input type="checkbox" class="js-enable" data-target="#enaX">有効A</label>
--<label><input type="checkbox" class="js-enable" data-target="#enaX">有効B</label>
--<label><input type="checkbox" class="js-enable" data-target="#enaX">有効C</label>

無効A

無効B

無効C

有効A

有効B

有効C

Ver3.04から、select要素に対しても指定できるようになりました。
Ver3.10から、selectの値判定を数値で行うオプション（data-type="int"）が追加されました。

フォーム操作による要素の表示・非表示

<label><input type="checkbox" class="js-switch" data-target="#js-switch-target">表示、非表示の切り替え→<span id="js-switch-target">文字列</span></label>
<input type="button" value="ボタン" class="js-switch" data-target="#js-switch-tar2" data-hide-val="表示する" data-show-val="非表示にする">
<blockquote id="js-switch-tar2">ブロック要素ですですです。</blockquote>

表示、非表示の切り替え→文字列

ブロック要素ですですです。

A要素をスイッチにすることはできません。
data-negative="1" を指定するとオン/オフの扱いが反転します。
data-delay で表示切替速度を設定できます。(Ver3.50-)

色選択ボックスを表示

<input type="text" class="color-picker">

data('onChange') に関数を設定すると、ColorPickerの onChange イベント発生時に callback します。

フォームの値チェックと確認

<form method="GET" action="https://adiary.org" class="js-check" data-confirm="ページを移動してもいいですか？">
<button type="submit">公式ページに移動</button>
</form>

js-checkクラスにより、フォームに送信チェックと確認の機能を持たせることができます。
data-confirmが指定されている場合、submit前に確認ダイアログが表示されます。
data-targetにjQueryセレクタが指定されている場合、該当要素が1個以上チェックされている時にのみフォームが送信されます。またこの際confirmメッセージ中の%cは、チェックされている個数（数値）に置換されます。
data-focus に cancel が設定されているとき、ダイアログのデフォルト選択ボタンは「キャンセル」になります。

押したボタンによって、confirmの挙動を変更したい場合は、ボタンとフォームの両方にjs-checkクラスを設定し「data-confirm」を指定してください。

accordion機能

"js-accordion" クラスを持つ要素に対して、アコーディオン機能を初期化します。

DnDエミュレーション

"treebox" クラスを持つ要素に対して、スマホ用のDnDエミュレーションを初期化します。

関連記事