DOM要素に対する機能

adiary_init(obj)

jQueryオブジェクトであるobj内の全要素に対して、adiary固有の機能を付加します。

最初に生成されたHTML要素およびjQuery上で追加した要素に対しては自動的に呼び出されますが、以下の場合は自動付加を行いません。

  • 要素自身もしくは親要素が「js-hook-stop」クラスを持つとき。
  • HTML文字列等のjQueryオブジェクトではないものをappend等で追加したとき。

html()でHTML文字列を設定したときは大丈夫です。自動機能付加を止めたいときは、グローバル変数「jquery_hook_stop」に true を設定します。

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

<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 です。btn-helpは1秒です。

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

<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="checkbox" class="js-checked" data-target="#myform .mycheck">

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

enable/disalbeボタン

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

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

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

<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>パイナップル</label><br>

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

レモン以外の人は記入してください

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

-<button id="disX">どれか一つで無効化</button>
--<input type="checkbox" class="js-disable" data-target="#disX"><label>無効A</label>
--<input type="checkbox" class="js-disable" data-target="#disX"><label>無効B</label>
--<input type="checkbox" class="js-disable" data-target="#disX"><label>無効C</label>
-<button id="enaX">どれか一つで有効化</button>
--<input type="checkbox" class="js-enable" data-target="#enaX"><label>有効A</label>
--<input type="checkbox" class="js-enable" data-target="#enaX"><label>有効B</label>
--<input type="checkbox" class="js-enable" data-target="#enaX"><label>有効C</label>
  • Ver3.04から、select要素に対しても指定できるようになりました。
  • Ver3.10から、selectの値判定を数値で行うオプション(data-type="int")が追加されました。

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

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

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

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

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

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

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

  • A要素をスイッチにすることはできません。
  • data-switch-speedでは表示、非表示切り替え速度をms単位で指定します。
  • data-default="hide" を指定すると標準で非表示になります。

enterキーによるsubmitの防止

<input class="no-enter-submit">
<form class="no-enter-submit">

色選択ボックスを表示

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

要素の data('onChange') に関数を設定すると、ColorPickerの onChange イベントが同じ引数で呼ばれます。

input, textarea要素にフォーカスクラスの付加

フォーカス中の要素を含むテーブルセルに対して、focusクラスを設定します。

input type="radio"/"checkbox"要素への自動ラベル付け

-
-<input type="checkbox"><label>テスト</label>
-<input type="radio" name="labeltest"><label>テスト1</label>
<input type="radio" name="labeltest"><label>テスト2</label>
<input type="radio" name="labeltest"><label>テスト3</label>


該当要素の直後に出てくる<label>要素を関連付けます。IDがない場合は自動的にIDを生成して付加します。

input/select要素の値を保存

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

要素のIDに関連付けて、要素の値を保存します。値はブラウザのローカルストレージ(cookieのようなもの)に保存されます。

select要素でコンボボックス

サムネイル<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」と併用できます。

要素の表示位置を変更

<div id="dropdown-menu" data-move="#page-title" data-move-type="append">

HTMLの要素の位置を変更します。

  • move : 移動先の基準となるセレクタを指定します。
  • move-type : 基準に対しどこに移動するか指定します。指定可能なタイプは prepend, append, before, after のいずれかです。

要素の幅を自動設定

<div class="js-auto-width"></div>

要素の横幅を、要素の中身のサイズから自動設定します。「display: teble-cell」を指定する感覚に近くなります。

ファイルアップロード機能の無効化

<input type="file" class="js-fileup">

window.formData が利用できないブラウザ(IE9以下等)で、ファイルアップ機能(当該input要素)を無効化します。

その他

  • input type="text"等の自動リサイズ機能。*1
  • テキストエリアでtabを入力可能に。
  • class="js-submit"のclickイベントで、それを含むフォームを送信。
  • class="jqueryui-tabs"に対し、jQuery-uiのタブ機能初期化。
  • class="jqueryui-accordion"に対し、jQuery-uiのaccordion機能初期化。
  • class="treebox"に対し、dndEmulation() の自動登録。
  • コメント欄の「>>14」などの記述を該当コメントへのリンクに加工。
  • スマホ用のドロップダウンメニュー実現のための細工。
  • ソーシャルボタンのリンク加工とシェア数の非同期ロード。

*1 : textareaリサイズはブラウザが標準で持っていることが多いので何もしません

OK キャンセル 確認 その他