Autocomplete Widget
自動入力補完用のライブラリです。
https://jqueryui.com/autocomplete/
補完リストの全項目を表示したい
デフォルトでは1文字以上入力しないと、補完リストは表示されません。
全ての項目を表示したいときは、minLengthの値を0にします。
$( ".selector" ).autocomplete({
minLength: 0
});
補完リストにスクロールバーを付けたい
ui-autocompleteクラスにスクロールバーのスタイルを設定します。
https://jqueryui.com/resources/demos/autocomplete/maxheight.html
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
}
補完リストを上方向に表示したい
positionオプションを使います。
$( ".selector" ).autocomplete({
position: { my : "lef bottom", at: "left top" }
});
意味は、「一覧要素の左側・下側を、input要素の左側・上側に合わせる」です。
項目数が多いときのみ、補完リストを上方向に表示したい
positionオプションのcollisionを指定します。
$( ".selector" ).autocomplete({
position: { collision : "flip" }
});
"flip"の意味は、下記の通りです。
http://js.studio-kingdom.com/jqueryui/method_overrides/position
ターゲットの反対側に要素を配置します。 より多く要素部分が表示される側に配置されます。
Slider Widget
changeイベントとsliderイベントの違い
- changeイベント
- スライダーからフォーカスアウトしたときにイベント発生
-
valueメソッドでを使ってvalueの値が変わったときも、イベント発生
- sliderイベント
- マウスを動かすごとにイベント発生
スライダーハンドルにIDを付ける方法
スライダーハンドルは、sliderメソッドを呼び出したときに生成されます。
スライダー要素の中にui-slider-handleクラスを持つ要素を配置して、sliderメソッドを実行すれば、その要素がスライダーハンドルになります。
ui-slider-handleクラスを持つ要素に、IDも付与すればOKです。
また、span要素でなくdiv要素も使えます。
<div id="slider">
<span id="min-handle" class="ui-slider-handle" ></span>
<span id="max-handle" class="ui-slider-handle" ></span>
</div>
$( "#slider" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ]
});
Selectable
要素が多いと初期処理に時間がかかる
100行20列のtable要素にSelectableを設定したときの初期処理を計測しました。
| Browser | filter指定 | 初期処理時間[sec] |
|---|---|---|
| IE11 | なし | 1.7 |
| IE11 | "tr" | 0.1 |
| Firefox56 | "tr" | 0.03 |
以下、測定条件です。
- 100行20列のtable要素
- IE11(11.608.15063.0)
- Firefox 56.0
<div id="wrapper">
<table id="selectable"></table>
</div>
//table生成
let tableElm = document.getElementById("selectable");
for (let i = 0; i < 100; i++) {
let rowElm = document.createElement("tr");
for (let j = 0; j < 20; j++) {
let cellElm = document.createElement("td");
cellElm.textContent = i + "-" + j;
rowElm.appendChild(cellElm);
}
tableElm.appendChild(rowElm);
}
// jQuery Selectableを有効にする
console.time('selectable');
$( "#selectable" ).selectable({
filter:"tr"
});
console.timeEnd('selectable');
計測した結果です。
- fitlerを使うと、処理が速くなる。
- IE11よりFirefoxの方が速い。
td要素の中にa要素がある場合
デフォルト設定だと、リンクを選択できません。
cancelオプションにa要素を指定すれば、リンクを選択できます。