2016-05-11

jQuery UI autocompleteの検索条件をカスタマイズする

データの用意

準備として検索用のデータを用意します。
(データの内容は何でもいいですよ？)

処理概要

jQuery UIのautocompleteは、sourceに指定した要素において
labelは見た目上の表示に
valueは選択した際に代入される値
となります。

そのため、まずは $(autocompleteData).each( にて、autocompleteDataの各要素に
labelとvalueをセットします。
labelには、本来は表示されるテキストですが今回はカスタマイズするため、検索対象となる文字列を
valueには選択後にテキストボックスに代入される値をそれぞれセットします。

次にautocompleteを拡張します。

初期化と同時に
focus: function(event, ui)
select: function(event, ui)
をそれぞれ指定します。
コメントの通りですが
focusでは、候補選択時の挙動を
selectでは、候補選択確定時の挙動を
記述します。

最後に、初期化に使用したautocomplete()のメソッドチェーンにて
_renderItemに(function(ul, item)を定義します。
ここでは入力途中で表示される候補のリストの各要素の表示を制御します。

こんな感じの挙動になります

jQuery UI autocompleteの検索条件をカスタマイズ

2016-04-28

jQuery UI datepickerを日本語化したりカスタマイズしたり

datepicker jQuery UI

前回に引き続きjQuery UIのdatepickerです。
やはりデフォルトのままだと色々不便があります。
前回はカラー(テーマ)のカスタマイズを紹介しました。

jQuery UIの導入方法と色を変えるためのカスタマイズ - メン醤のjQuery workshop

日本語化

公式のGitHub リポジトリよりdatepicker-ja.jsをDLします。
(Rawと書いてあるボタンをクリックするとこのファイルだけ取得できます)

https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js

jsのjquery-uiディレクトリなどに置いてscriptタグで読み込ませます。

f:id:ryoichi0102:20160427202148p:plain

カレンダーの表示位置

カレンダーの表示位置はデフォルトで自動計算になっていますが、
テキストボックスの配置がウィンドウの下限に近い場合に
自動で上部に表示してくれますが、
特にBootstrapの固定ヘッダなどがある場合など
ヘッダの下に回り込んでしまうことがあります。

f:id:ryoichi0102:20160427203024p:plain

これは良くない…！
そんな場合はカレンダーの表示位置を下になるように固定しちゃいましょう！
beforeShowの所がその処理です。
表示位置をテキストボックスの左下になるように計算します。

f:id:ryoichi0102:20160428081241p:plain

カレンダーは下に表示され、スクロールバーが出ます。

効率よく初期化

1画面上に複数のdatepickerを使用する場合、
1つ1つのidをセレクタで取って.datepicker()を呼びがちですが
classセレクタでまとめて初期化するのが効率が良いです。

<input type="text" id="target_date1" class="form-control this-is-datepicker" />
<input type="text" id="target_date2" class="form-control this-is-datepicker" />
<input type="text" id="target_date3" class="form-control this-is-datepicker" />

このような複数のinputに

$(document).ready(function($) {
  // 一気に初期化する.
  $('.this-is-datepicker').datepicker();
});

で一気に初期化することができます。

2016-04-27

jQuery UIの導入方法と色を変えるためのカスタマイズ

jQuery UI

今回はjQuery UIの導入方法とカスタマイズ方法を紹介します。

jQuery UIとはjQueryに追加するプラグインで、
日付選択(datepicker)や、入力候補(autocomplete)、数値入力テキストボックスの機能改善
などの追加機能を簡単に組み込むことができます。

デモはこちら。
https://jqueryui.com/demos/

ダウンロードして導入

https://jqueryui.com/
へアクセスして、右側のQuick DownloadsからStableを落とせば
jquery-ui-1.11.4.zip が入手できます。
v1.11.4はjQuery 1.6以降前提ですが、まぁ大丈夫ですよね。

そしてzipを解凍して

jquery-ui.min.css
jquery-ui.min.js
jquery-ui.structure.min.css
jquery-ui.theme.min.css
images/

を各自のjs,css ディレクトリへ配置すれば完了です。
images/ はcssと同じ位置に(css/images/となるように)します。
index.html は各パーツのデモのためのhtmlです。
external/jquery/jquery.js はindex.htmlのためのもので不要です。
各システムのページにてjquery-ui.jsを使用するscriptタグより前に
jquery-ui.jsが対応しているjquery.jsのscript宣言があればOKです。
(現段階では前述のとおりjQuery 1.6以降です)

datepickerをちょっと動かしてみる

ダウンロードしたindex.htmlにもデモとして記載あるのですが、
せっかくなので手元のシステムに組み込んだり、書いてみたりしましょう。

少ない記述量で実現できます。
$( --- ).datepicker(); と呼ぶだけです。

f:id:ryoichi0102:20160420091253p:plain

で、ここで思うことがあると思います。

・・・こんな色やだ

カスタマイズ方法

jQuery UIは標準でダウンロードするとこうなりますが、
色を指定したりthemeをCustomizeして取り込むことができます。

再度、https://jqueryui.com/ へアクセスして、
今度はCustom Downloadをクリックします。

Download Builder という画面に遷移します。
ここでは、Versionが選べたり、必要なComponents(パーツ)だけを組み込むことができます。
そしてThemeですが、
ここではセレクトボックスでテーマ名が選べるだけでその内容がプレビューできません。
ですので、design a custom themeリンクをクリックします。
(このリンクがhttpsでアクセスすると出ません…GitHubでも報告されてるしバグかな…)

出ない例(https)
f:id:ryoichi0102:20160425084755p:plain

出る例(http)
f:id:ryoichi0102:20160425084813p:plain

design a custom themeリンクをクリックすると ThemeRoller という画面に遷移します。
左側サイドメニューのタブにRoll your ownやGalleryなどのタブが並んでいます。

Roll your ownでは個別の詳細な部分でのカスタマイズ、
Galleryでは予め用意された配色が適用されます。
(このタブの並び順が逆ならもっとわかりやすいのになぁ…)
だいたい、Galleryで近いものを見つけて Editボタンを押下して、
Roll your ownに切り替わるので、そこで少し変更してDownload themeというのが
よくある流れになるかと思います。

その後、先ほどのDownload Builder画面に戻るので
(画面構成的に戻れると思えない感じになってますよね…戻れます。)
そのままDownloadボタンを押すと jquery-ui-1.11.4.custom.zip がDLできます。

解凍してcss ディレクトリへ展開して完了です。

f:id:ryoichi0102:20160427082335p:plain