jQuery UI Datepickerをカスタマイズおよびテーマ設定する方法

jQueryのUIは単に素晴らしいですし、使いやすさのために、それは人気がありインタラクティブな機能を必要とするほとんどすべてのウェブサイトで広く使われています.

そして、この記事では、提供されている機能の1つ、Datepickerウィジェットについて見ていきます。.

あなたがあなたの全体的なデザインに対応するあなた自身のテーマを作成することができるように、私たちはカレンダーテーマをカスタマイズする方法を学ぶことを試みます。ただし、このチュートリアルを始める前に、JavaScriptについて少し理解し、CSSに精通しておく必要があります。.

デモ
ソースをダウンロード

準備ができたら、始めましょう.

資産

カレンダーの重要な資産をいくつか準備しましょう.

まず、カレンダーのデザインはPremium PixelsのこのPSDファイルを参照します。だから私たちが必要な色のサンプルを取るのを助けるために最初にそれをダウンロードしたほうがいいです。次に、から2つのパターンをダウンロードしてください。 微妙な パターン カレンダーの背景として使用します。この例では、次のパターンを使用することにしました。黒デニムとダークレザー.

jQuery UIによって生成された要素クラス/ IDを調べるには、FirebugのようなWeb開発ツールも必要です。.

まあ、私たちは十分な準備ができたと思います。それでは最初のステップに行きましょう.

ステップ1：jQuery UI Datepicker

まず、jQuery UIダウンロードページに行きます。このページでは、次のようにいくつかのオプションが表示されます。 UIコア、ウィジェット、インタラクションとエフェクト.

我々はすべき すべてのコンポーネントの選択を解除します, 全部必要なわけではないので.

それから、 ウィジェット 日付ピッカーのみを選択します。 jQuery UIは自動的に重要な依存関係を選択します。 ダウンロード ファイル.

ダウンロードしたすべてのファイルをリンクする - CSSを除く - 次のように、HTMLの空白の文書に追加します。

ステップ2：日付ピッカーをカスタマイズする

このステップでは、以下のオプションで日付ピッカーを設定します。.

上記のコードはjQueryに対して、次のように要素のカレンダーを表示するように指示します。 デートピッカー id。だから、我々は以下を置く必要があります div カレンダーを形成するボディセクションに - datepicker ID - のタグを付けます。

これでカレンダーはすでに生成されていて、このように表示されるはずです。スタイルはまったくありませんが、それでも機能はあります。.

ステップ3：スタイル

それではカレンダーのスタイリングを始めましょう。いつものように、すべての要素を正規化し、新しいスタイルシートを作成することから始めます。この例では、名前を付けます。 datepicker.css. それから、それらすべてをHTML文書にリンクします。.

次に、最初に本文に背景を付けて、HTMLが見やすくならないようにします。.

body background：url（ '…/img/darkdenim3.png'）繰り返し0 0＃555;

次に、日付ピッカーの幅を指定して中央に配置し、ドロップシャドウを追加してカレンダーに目立つ効果を与えます。.

.ui-datepicker width：216px;身長：オート。マージン：5px auto 0。フォント：9pt Arial、sans-serif。 -webkit-box-shadow：0px 0px 10px 0px rgba（0、0、0、.5）。 -moz-box-shadow：0px 0px 10px 0px rgba（0、0、0、.5）;ボックスシャドウ：0px 0px 10px 0px rgba（0、0、0、.5）;

また、すべてのアンカータグからデフォルトのアンダーライン装飾を削除します。.

.ui-datepicker a テキスト装飾：なし。

jQuery UIのカレンダーは、 表. それでは、追加しましょう 100％ の幅 表, そのため、上のラッパーと同じ最大幅になります。あれは 216px

.ui-datepickerテーブル幅：100％;

ヘッダーセクションのスタイル

日付ピッカーには、次のものを含むヘッダーセクションがあります。 月と年 カレンダーのこのセクションには、以前にダウンロードしたダークレザーの質感と、わずかに白いフォントカラーと 1px 上部に白い影.

.ui-datepicker-header background：url（ '…/img/dark_leather.png'）繰り返し0 0＃000;色：＃e0e0e0;フォントの太さ：太字。 -webkit-box-shadow：インセット0px 1px 1px 0px rgba（250、250、250、2）。 -moz-box-shadow：インセット0px 1px 1px 0px rgba（250、250、250、2）。ボックスシャドウ：インセット0px 1px 1px 0px rgba（250、250、250、.2）。 text-shadow：1ピクセル-1ピクセル0ピクセル＃000。フィルタ：ドロップシャドウ（色＝＃０００、オフｘ ＝ １、オフｙ ＝ −１）。行の高さ：30ピクセル。ボーダー幅：1px 0 0 0。ボーダースタイル：ソリッド。ボーダーカラー：＃111。

次に、中央揃えしましょう月ポジション.

 .ui-datepicker-title text-align：center;

交換する次そして前の PSDからスライスされたスプライトの矢印画像を含むテキスト.

.ui-datepicker-prev、.ui-datepicker-next display：inline-block;幅：30ピクセル。高さ：30ピクセル。 text-align：center。カーソル：ポインタ。 background-image：url（ '…/img/arrow.png'）; background-repeat：繰り返しなし。行の高さ：600％。オーバーフロー：隠れています。

次に、それぞれ矢印の位置を調整します.

.ui-datepicker-prev float：left;背景位置：センター-30ピクセル。 .ui-datepicker-next float：right;;背景位置：センター0px。

しながら 日の名前 セクションは内にラップされています 広告, 私たちのデザイン参照に基づいて、それはわずかに白いグラデーションを持つでしょう。そして、作業を簡単にするために、このツールを使ってグラデーションコードを生成します。

.ui-datepicker thead 背景色：＃f7f7f7;背景画像：-moz-linear-gradient（上、＃f7f7f7 0％、＃f1f1f1 100％）; background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃f7f7f7）、カラーストップ（100％、＃f1f1f1））; background-image：-webkit-linear-gradient（トップ、＃f7f7f7 0％、＃f1f1f1 100％）;背景画像：-o-linear-gradient（上、＃f7f7f7 0％、＃f1f1f1 100％）; background-image：-ms-linear-gradient（トップ、＃f7f7f7 0％、＃f1f1f1 100％）;背景画像：線形勾配（上、＃f7f7f7 0％、＃f1f1f1 100％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃f7f7f7"、endColorstr = "＃f1f1f1"、GradientType = 0）;ボーダーボトム：1px実線#bbb。

の 日の名前 テキストは濃い灰色になります。 ＃666666 そして彼らはまた薄い白になります テキスト影 それに押された効果を与えるため.

.ui-datepicker th テキスト変換：大文字。フォントサイズ：6pt。パディング：5px 0。カラー：＃666666。 text-shadow：1px 0px 0px #fff;フィルタ：dropshadow（色=＃fff、offx = 1、offy = 0）。

この時点で、カレンダーは次のようになります。

日付のスタイル

カレンダーの日付は次のように折り返されています td またはテーブルデータ。そのため、パディングをに設定します。 0 間のスペースを削除する td そしてそれに1pxの右ボーダーを与えなさい.

.ui-datepicker tbody td パディング：0;右ボーダー：1px実線#bbb。

最後を除いて td, 正しい境界線はありません。このために、右の境界線を0に設定します。.

.ui-datepicker tbody td：最後の子border-right：0px;

テーブルの行はほぼ同じになります。最後の行を除いて、それは1pxボーダーの底を持つでしょう.

.ui-datepicker tbody tr 境界下：1ピクセルxbbb; .ui-datepicker tbody tr：最後の子border-bottom：0px;

デフォルト、ホバー、およびアクティブ状態のスタイリング

このステップでは、日付ホバーとアクティブスタイルを定義します。まず、ディメンションを指定して日付のデフォルト状態を定義します。日付のテキスト位置を中央に配置し、グラデーションカラーと内側の白い影を追加します.

.ui-datepicker td span、.ui-datepicker td a display：inline-block;フォントの太さ：太字。 text-align：center。幅：30ピクセル。高さ：30ピクセル。行の高さ：30ピクセル。カラー：＃666666。 text-shadow：1px 1px 0px #fff; filter：dropshadow（color =＃fff、offx = 1、offy = 1）; .ui-datepicker-calendar .ui-state-default background：#ededed;背景：-moz-linear-gradient（top、＃0から0、＃100から100％）;背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃ededed）、カラーストップ（100％、＃dedede））;背景：-webkit-linear-gradient（上、＃0から0％、＃100から100％）背景：-o-linear-gradient（上、＃0から0、＃100から100％）;背景：-ms-linear-gradient（上、＃0から0％、＃100から100％）;背景：線形グラデーション（上、＃0の減少、100％の減少）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃ededed"、endColorstr = "＃dedede"、GradientType = 0）; -webkit-box-shadow：インセット1px 1px 0px 0px rgba（250、250、250、5）。 -moz-box-shadow：インセット1px 1px 0px 0px rgba（250、250、250、5）。ボックスシャドウ：インセット1px 1px 0px 0px rgba（250、250、250、.5）。 .ui-datepicker-unselectable .ui-state-default background：＃f4f4f4;色：＃b4b3b3。

日付の上にマウスを移動すると、少し白に変わります.

 .ui-datepicker-calendar .ui-state-hover 背景：＃f7f7f7;

日付がアクティブ状態のときは、次のようになります。.

 .ui-datepicker-calendar .ui-state-active 背景：＃6eafbf; -webkit-box-shadow：インセット0px 0px 10px 0px rgba（0、0、0、.1）; -moz-box-shadow：インセット0px 0px 10px 0px rgba（0、0、0、.1）;ボックスシャドウ：インセット0px 0px 10px 0px rgba（0、0、0、.1）。色：＃e0e0e0; text-shadow：0ピクセル1ピクセル0ピクセル＃4d7a85;フィルタ：ドロップシャドウ（色＝＃４ｄ７ａ８５、オフｘ ＝ ０、オフｙ ＝ １）。ボーダー：1ピクセルソリッド＃55838f。位置：相対;マージン：-1px。

今、カレンダーははるかに良く見えるはずです.

位置を固定する

この時点で、日付をよく見てください。最初の列または最後の列で日付をクリックすると、アクティブ状態がカレンダーの端から1ピクセルオーバーフローしていることがわかります。.

だからここで、私たちはいくつかの小さな修正を行います.

まず、日付の幅を 29px, 最後の列の右マージンと最初の列の左マージンを 0 逆にする -1px アクティブ状態に対して以前に設定したマージン.

.ui-datepicker-calendar td：最初の子.ui-state-active 幅：29ピクセル;左余白：0; .ui-datepicker-calendar td：最後の子.ui-state-active 幅：29px;右マージン：0。

カレンダーの最後の行の日付も同様の扱いになります。.

.ui-datepicker-calendar tr：最後の子.ui-state-active 高さ：29ピクセル;マージンボトム：0。

それでは、結果を見てみましょう。さて、カレンダーは今美しく見え、私たちのデザインの参考資料として完璧にフィットします。そして、あなたはデモを見て、画像の下のリンクからコードを調べるためにソースをダウンロードすることができます.

デモ
ソースをダウンロード

ボーナス：カレンダーを拡張する

さて、今日はjQuery UI Datepicker用のカスタムテーマを作成する方法について多くのことを学びました。しかし、このデートピッカーから拡張できるものはまだたくさんあるので、ここで止めるべきではありません。あなたのjQueryとCSSの熟練度に応じて、カレンダーをこのように拡張します - オーバーレイ日付ピッカーによるテキスト入力.

デモ
ソースをダウンロード

参考文献

jQuery UIについてさらに読むために。あなたはここで完全なドキュメンテーションを読むことができます：

jQuery UIを始めよう
テーマ別jQUery UI
jQuery UI：テーマAPIクラス

最終的な考え

このチュートリアルを読んで従ってくれてありがとう、私はあなたがそれが役に立つとわかることを願っています。そして、もしあなたが何らかのフィードバックを持っていたり、このチュートリアルから欠けているかもしれないものを追加したいのであれば、以下のコメントセクションでそれを指摘してください。再度、感謝します）.