SigmaGridを使ってみた（その2）

普通にSigmaGridとjQuery uiを使いますと、表示の階層で少し手入れが必要になります。

• 実行環境
  • Sigma Grid 2.2
  • jQuery 1.4.2
  • jQuery ui 1.8RC3

例えば普通にjQuery uiの”autocomplete”や”datepicker”を使うとこうなります。
■autocomplete

■datepicker

調べると、SigmaGridは「gt_grid.cssの”.gt-head-div”」でz-indexが2、autocompleteとdatepickerはstyle埋込みで、z-indexが1でした。
■datepickerの埋込スタイル

autocompleteでの対応

autocompleteの場合は、”openイベント”で、z-indexの調整を行います。ただこの場合は、固定になってしまい、ダイアログuiなどが、もっと大きな値のケースがあるので、その場合は”maxZIndex”などのユーティリティで、最大z-indexを動的に取得、設定するか、適宜変える必要があります。

        // サジェストのz-indexを調整
        $('.ui-autocomplete-input').autocomplete('option', {open:
            function(event,ui){ 
                //静的設定
                $('ul.ui-autocomplete').css('z-index',5) ;
            }
        });

datepickerでの対応

datepickerは”beforeShowイベント”でやろうと思ったのですが（以前のバージョンでその様に解説しているサイトもありましたが...）、どうもdatepickerのz-indexの設定が、イベント後のようで、うまくいきませんでした。
jQuery uiの中では、”zIndex”というメソッドで最大値を取得してやっていそうなのですが、jQuery uiのインスタンスで最大の値を取得するだけなのかもしれません。（追ってないので詳細は不明ですが、属性はzIndexを調べていたので...。以前のuiだとダイアログとのz-indexを手動で調整していたのが、この辺りで改善されているのカモ。）
”afterShowイベント”的なものは無さそうなので、あきらめて暫定で、”jquery.ui.datepicker.js”の645ステップあたりを以下の様に修正しました。

         //inst.dpDiv.zIndex($(input).zIndex()+1);
         inst.dpDiv.zIndex($(input).zIndex()+5);

■修正後

余談

datepickerを日本語にすると、デフォルトcssだと、年月のセレクタが縦に並んでしまうので、以下のクラスを調整して横に並べます。
■任意のcssに以下を追加

/* カレンダー年月の幅調整  */
/* 元のテーマ「jquery-ui-1.8rc3.custom.css」 */
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 45%;}  /* 49%; */