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>
<button type="button" class="btn-help" data-help="ボタン自体にヘルプ機能をつけます。">ボタン</button>

画像のポップアップ?

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

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

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

<button class="js-info" data-info="あいうえお。\n<span>かきくけこ</span>。\nさしすせそ">ボタン1</button>
<button class="js-info" data-url="<url>">ボタン2</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 の概念がないので、ドロップダウンメニューをタッチ操作で使えるように細工します。