メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

<table>の<tr>行をコピーして追加

jQuery

今回はちょっと違うアプローチ

以前も取り上げましたが、その際は追加するための行の情報を入力するような方式だったり、行情報を入力する場所が別テーブルになっていたりでした。

jquery-workshop.hatenablog.com

今回は選択行をコピー

前回は追加する行の情報を入力して行追加、という処理でしたが 今回は、コピーする行を選択して、その行を追加、という処理になっています。

当ブログの検索流入は「table 行追加」関連が多いので 今回違うアプローチで記事にしてみました^^

tableタグの実装

行コピーするにあたって 編集できてよい内容をcontenteditable="true"に設定しました。

また、行コピー時に重複して困るような項目として <td class="unique-no"> を付与しています。

コピーするjQueryコード

var $clonedTr = $tr.clone();でtr要素のクローン(コピーしたもの)を取得しています。

そして、コピーとはいえ重複しては困る項目については
$clonedTr.find('.unique-no').text(generateMaxNo());
として変更しています。
generateMaxNo()は<td class="unique-no">のテキストよりmax+1を返すサンプルとして作成した関数です。

そして$tr.after( $clonedTr );でチェックした行の後にコピーした行を追加しています。

動作イメージ

jQuery UI datepickerの休日・祝日表示のカスタマイズを行う

datepicker jQuery UI

カスタマイズ

先日jQuery UIのdatepickerについて日本語化・表示位置の調整・初期化の一括簡略化などを紹介しましたが、まだまだカスタマイズの余地があります。
今回は、週末(土曜・日曜)と祝日を選択不可にして、さらに表示文字色も一般的なカレンダーのように変更するカスタマイズ方法を紹介します。

祝日の定義

まずは祝日をJSONで定義します。
それに伴い、年月の表示幅も決めておくとJSONで定義した範囲外の休日/祝日が画面上では選択できないようになるので良いかと思います。

JSONの定義はキーが日付(YYYY/MM/DD)になるように定義して
後述のロジックでキーが存在するかどうか？判定できるように
JSONのフォーマットを工夫してあります。

休日/祝日の判定

.datepicker({ *** }); で初期化する点は通常と変わりません。

オプションにminDateとmaxDateを指定するのも通常のdatepickerのオプションと変わりませんね。

休日・祝日の判定はbeforeShowDayのfunciton定義で行います。
$.datepicker.formatDate('yy/mm/dd', day);で表示しようとしている日付をYYYY/MM/DDに成形します。
そして、

  • 祝日として存在する場合
  • 日曜の場合
  • 土曜の場合
  • それ以外(平日)の場合

をif-elseで変数名daySettingsに設定しています。

なお、beforeShowDayは配列で3値を持つ値を返す必要があり、それぞれ

  • 第1引数はboolean : trueはその日付が選択可となる。
  • 第2引数はstring : cssへ追加するスタイルが指定できます。
  • 第3引数はstring : tooltipが

第2,3引数は特に何もない場合は空文字""を設定してあげましょう。

休日/祝日の表示

datepickerでは下記のようなタグが各日付の表示用に自動的に生成されます。

  • 選択可能な平日は<td>配下に<a class="ui-state-default">
  • 選択可能な週末は<td class="ui-datepicker-week-end">配下に<a class="ui-state-default">
  • 選択不可に設定した平日は<td class="ui-datepicker-unselectable ui-state-disabled">配下に<a class="ui-state-default">
  • 選択不可に設定した週末は<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled">配下に<a class="ui-state-default">

まとめるとこんな感じです。

これを利用して、土曜は青に、日曜を赤に、祝日を赤で表示させます。

なお、上述のように選択可/不可によって子タグが<a>か<span>か変わるので、
先の処理で土日祝を選択可/不可どちらに設定したかによってCSSの記述が変わってきます。
下記は両方に対応するよう2つ定義しています。

表示

jQuery Migrate 1.4.1 リリース

jQuery Migrate jQuery リリース

既にjQuery 3.0リリース評価版が出ていますが、このところjQueryブログのポストが頻繁なのと
3.0の記事はボリュームも多く現在咀嚼中です...

jQuery Migrate 1.4.1 がリリースされました。

blog.jquery.com

(ところで)そもそもjQuery Migrateとは

当ブログでは初出のjQuery Migrateとは、
jQueryのバージョンを上げる際にjQuery Migrateを使用すると
アップグレードについての警告を出力してくれるプラグインです。

使用方法は取り込むだけ

こんな感じでconsoleに表示されていきます。

f:id:ryoichi0102:20160524085740p:plain

Migrate 1.4.1 での更新内容としては

  • いくつかのWordPressテーマで使用されている括り文字の無いjQuery呼び出しに対応
  • 現在jQuery 1.12.x or 2.2.x ならそのままアップグレードして大丈夫でしょう

jQuery 3.0 へ向けてのマイグレーション手順

jQuery 3.0 へ向けてのマイグレーション手順は下記の通りとなります。
なお、jQuery Migrateの位置付けは変わらずで、Migrate 3.0はリリース評価版の後に出ます。

  • 1.x または 2.xの最終版(この時点では1.12.4 と 2.2.4)にアップグレードしていない場合は
    まずはjQuery Migrate 1.4.1を使用して出力される警告を取り除来ましょう。
  • Migrateを除いても正常に動作することを確認します。
  • jQuery 3.xとjQuery Migrate 3.0にアップグレードして、3.x特有の警告を取り除きます。
    なお、jQuery 3.0はjQuery 3.x系の最終バージョンで使用すること。

jQuery 2.2.4 と 1.12.4 が出ました

jQuery リリース

blog.jquery.com

概要

  • AMD sourceに関するissueの修正
  • ":visible" セレクターのバグを修正

とのことです。
AMD ソースって何だろう…？
Changelogを見るとIE 11のフルスクリーンモードでのiframeタグの問題も解決されているようです。

今回も破壊的変更はないようで、そのまま前バージョンから上げて問題なさそうです。

jQuery Migrate

先日リリースの jQuery Migrate 1.4.1 を使えば今回の1.12.4/2.2.4にマイグレートすることができます。
(jQuery 3.0用のマイグレーションプラグインは今後となるようです)

Migrateについては別途記事を書こうかと思います。

おまけ

既存のソースを1.12.3に書き換えてる間に1.12.4が出てしまいました^^;

jQuery UI autocompleteの結果表示をカスタマイズしてdivやtableに表示させる

autocomplete jQuery UI 46

前回の続きです

jquery-workshop.hatenablog.com

今回は、結果表示の方

前回は検索条件と検索対象のカスタマイズでしたが
今回は検索結果表示のカスタマイズです。

autocompleteではテキストボックスの下に一覧が出るのが標準ですが
これを

<div id="search_results">
  <div class="search-resuls"> ... </div>
  <div class="search-resuls"> ... </div>
  <div class="search-resuls"> ... </div>
</div>

や

<table id="search_results">
  <tbody>
    <tr><td> ... </td></tr>
    <tr><td> ... </td></tr>
    <tr><td> ... </td></tr>
  </tbody>
</table>

としたいことって、結構あるのではないかと。

ちょっと入り組んだカスタマイズが必要ですが
手順通りやればできます。

コードの処理概要

データの用意や検索方法については前回のものを踏襲します。

上記の実例を要約すると、

$.widget('app.autocomplete', $.ui.autocomplete, {
    _suggest: // ※1
    _close: // ※2
});

$('#query').autocomplete({
    suggest: // ※3
});

というような拡張と実装となっています。

※1については、結果候補の拡張実装があれば(※3で定義)呼び出すような処理に。
※2については、結果候補のクリア処理の拡張で、
入力が空 または minLength未満 または blur時に呼び出されます。
サンプル実装においては、結果候補の一覧のリンクを押したりすることがあるため
blur時には結果候補を消さないような処理としています。

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


jQuery UI autocompleteの検索結果表示をカスタマイズ