DOM要素に対する機能

"js/src/40_dom.js" の機能です。

画像とヘルプのポップアップ

<span class="js-popup-img" data-img-url="/pub/adiary/image/img/banner.jpg">画像のポップアップ</span>
<span class="help" data-help="左の部分にマウスを乗せるとポップアップします。\n改行もできます。">?</span>

画像のポップアップ?

spanで例示してありますが要素の種類は問いません。URLはhttp://形式でも使えます。

data-delay="xxx" : 表示開始までの時間をミリ秒で指定します。省略時は 300ms です。

詳細情報ダイアログの表示

<button class="js-info" data-info="あいうえお。\n<span>かきくけこ</span>。\nさしすせそ">ボタン１</button>
<button class="js-info" data-url="<url>">ボタン２</button>

表示内容にHTMLタグを書けません。\nを書いた場合は改行として扱われます。
URL指定の場合、中身はHTMLとして読み込まれます。

input[type="text"]などで enter によるフォーム送信禁止

input要素かform要素に「no-enter-submit」クラスをつけます。

textareaでのタブ入力

textareaでのタブ入力を可能にします。
focusが当たった直後、またはESCを押した直後はタブ入力が無効になり、focusが移動します。

間接ボタン（file uploadボタンのカスタマイズ）

<button type="button" class="js-file-btn" data-target="#file-btn">ファイルを選択</button>
<input type="file" name="file" id="file-btn" style="display:none">

buttonを押すことで、別のボタンを押したと見なせます。
fileアップロードボタンをカスタマイズする際に使用します。

全選択ボタン

<input type="checkbox" class="js-checked" data-target="#myform .mycheck">

checkedが変更された時、targetに指定したセレクタに該当する要素すべてに対して、checked属性をコピーします。つまり、全選択、全選択解除ボタンとして動作します。

値変更時に自動送信(Ver3.50-)

<select class="js-on-change-submit"></select>
<input type="checkbox" class="js-on-change-submit">

値が変更されたときに、一番近い親にあるフォームが submit されます。

コンボボックス

サムネイル<select name="size" id="thumbnail-size" class="js-combo" data-target="#size-other" data-format="%vpx">
	<option value="120">120px</option>
	<option value="160">160px</option>
	<option value="240">240px</option>
</select></div>
<div style="display: none">
<div id="size-other" data-title="サムネイルサイズ">
<input type="number" value="120" class="w50" min="60" max="800">px
</div></div>

サムネイル

px

コンボボックスのような動作を実現します。「js-save」と併用できます。

ドロップダウンメニューのhoverエミュレーション

スマホには hover の概念がないので、ドロップダウンメニューをタッチ操作で使えるように細工します。

関連記事