網頁計劃之教您若何應用 jQuery 戰 CSS3 創立一個日歷控件

那個教程將教您若何應用 jQuery 戰 CSS3 去創立一個壯麗的日歷控件。我們將應用 CSS 去做款式，應用 jQuery 戰
jQuery UI 去做功效。我們將隻應用 jQuery UI 中的 “Datepicker”
劇本，以是您沒有須要下載全部的組件，可讓您的文件更小。

第一步 – HTML 代碼

我們隻須要一止 HTML 代碼，請留意那裡的 id 屬性：

1

正在 body 標簽之前，我們增加 jQuery 代碼。那裡我們須要挪用“datepicker”，您須要上裡界說的 div 的 id 屬性。我們正在那裡增加瞭一些選項：

inline – 讓日歷默許可睹，沒有須要面擊大概輸進控件
firstDay – 設置 Monday 為一周的開端
showOtherMonths – 正在表格中添補其他月份的日期以充斥表格

01
02
03

如今日歷看起去是如許的：

第兩步 – 容器

我們起首去移除全部的空缺，添補，邊框等等：

01 .ui-datepicker,
02 .ui-datepicker table,
03 .ui-datepicker tr,
04 .ui-datepicker td,
05 .ui-datepicker th {
06 margin: 0;
07 padding: 0;
08 border: none;
09 border-spacing: 0;
10 }

上面去讓那個日歷悅目一面，增加配景色彩，圓角，暗影，字體等等：

01 .ui-datepicker {
02 display: none;
03 width: 294px;
04 padding: 35px;
05 cursor: default;
06
07 text-transform: uppercase;
08 font-family: Tahoma;
09 font-size: 12px;
10
11 background: #141517;
12
13 -webkit-border-radius: 3px;
14 -moz-border-radius: 3px;
15 border-radius: 3px;
16
17 -webkit-box-shadow: 0px1px1pxrgba(255,255,255, .1), inset0px1px1pxrgb(0,0,0);
18 -moz-box-shadow: 0px1px1pxrgba(255,255,255, .1), inset0px1px1pxrgb(0,0,0);
19 box-shadow: 0px1px1pxrgba(255,255,255, .1), inset0px1px1pxrgb(0,0,0);
20 }

如今那個日歷看起去是如許的：

第三步 – 頭部

我們將變動日歷頭部（月份、年份）的色彩，並增加邊框，另有一些根本款式：

01 .ui-datepicker-header {
02 position: relative;
03 padding-bottom: 10px;
04 border-bottom: 1pxsolid#d6d6d6;
05 }
06
07 .ui-datepicker-title { text-align: center; }
08
09 .ui-datepicker-month {
10 position: relative;
11 padding-right: 15px;
12 color: #565656;
13 }
14
15 .ui-datepicker-year {
16 padding-left: 8px;
17 color: #a8a8a8;
18 }

我們將應用 “before pseudo selector”去增加綠色的圈圈。那可讓我們正在 month 元素之前插進內容，然後我們便可以格局化並設置內容的地位：

01 .ui-datepicker-month:before {
02 display: block;
03 position: absolute;
04 top: 5px;
05 right: 0;
06 width: 5px;
07 height: 5px;
08 content: ””;
09
10 background: #a5cd4e;
11 background: -moz-linear-gradient(top, #a5cd4e0%, #6b8f1a100%);
12 background: -webkit-gradient(linear, lefttop, leftbottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
13 background: -webkit-linear-gradient(top, #a5cd4e0%,#6b8f1a100%);
14 background: -o-linear-gradient(top, #a5cd4e0%,#6b8f1a100%);
15 background: -ms-linear-gradient(top, #a5cd4e0%,#6b8f1a100%);
16 background: linear-gradient(top, #a5cd4e0%,#6b8f1a100%);
17
18 -webkit-border-radius: 5px;
19 -moz-border-radius: 5px;
20 border-radius: 5px;
21 }

如今日歷控件看起去是如許的：

第四步 – Prev 戰 Next 按鈕

我們將應用配景圖片去格局化 next 戰 previous 箭頭，我們將把 previous 放正在左側，next 放正在右側：

01 .ui-datepicker-prev,
02 .ui-datepicker-next {
03 position: absolute;
04 top: -2px;
05 padding: 5px;
06 cursor: pointer;
07 }
08
09 .ui-datepicker-prev {
10 left: 0;
11 padding-left: 0;
12 }
13
14 .ui-datepicker-next {
15 right: 0;
16 padding-right: 0;
17 }
18
19 .ui-datepicker-prev span,
20 .ui-datepicker-next span{
21 display: block;
22 width: 5px;
23 height: 10px;
24 text-indent: -9999px;
25
26 background-image: url(../img/arrows.png);
27 }
28
29 .ui-datepicker-prev span { background-position: 0px0px; }
30
31 .ui-datepicker-next span { background-position: -5px0px; }
32
33 .ui-datepicker-prev-hover span { background-position: 0px-10px; }
34
35 .ui-datepicker-next-hover span { background-position: -5px-10px; }

如今日歷看起去是如許的：

第五步 – 日歷款式

我們將給 天 戰 周 增加頂部戰底部的添補並修正色彩：

1 .ui-datepicker-calendar th {
2 padding-top: 15px;
3 padding-bottom: 10px;
4
5 text-align: center;
6 font-weight: normal;
7 color: #a8a8a8;
8 }

上面去給“days grid”增加添補，修正色彩，並給每個數字增加一個通明的邊框。那是很需要的，由於我們要給選中的數字增加邊框，為瞭防備頁裡跳動，我們預先給全部的數字皆增加一個通明的邊框：

01 .ui-datepicker-calendar td {
02 padding: 07px;
03
04 text-align: center;
05 line-height: 26px;
06 }
07
08 .ui-datepicker-calendar .ui-state-default{
09 display: block;
10 width: 26px;
11 outline: none;
12
13 text-decoration: none;
14 color: #a8a8a8;
15
16 border: 1pxsolidtransparent;
17 }

對付當前選中的日期，我們要變動邊框戰筆墨的色彩為綠色。對付其他月份的日期，我們要修正為更暗的色彩：

1 .ui-datepicker-calendar .ui-state-active {
2 color: #6a9113;
3 border: 1pxsolid#6a9113;
4 }
5
6 .ui-datepicker-other-month .ui-state-default{ color: #565656; }

便如許我們的日歷做完瞭，下圖是終極後果：