วิธีการกำหนดและการกำหนดวันที่ jQuery UI Datepicker

jQuery UI นั้นยอดเยี่ยมและใช้งานง่ายจึงเป็นที่นิยมและใช้กันอย่างแพร่หลายในเกือบทุกเว็บไซต์ที่ต้องการคุณสมบัติแบบโต้ตอบ.

และในโพสต์นี้เราจะดูหนึ่งในคุณสมบัติที่มีให้คือวิดเจ็ต Datepicker.

เราจะพยายามเรียนรู้วิธีปรับแต่งธีมปฏิทินเพื่อให้คุณสามารถสร้างธีมของคุณเองที่จะสอดคล้องกับการออกแบบโดยรวมของคุณ อย่างไรก็ตามคุณต้องมีความเข้าใจใน JavaScript และคุ้นเคยกับ CSS ก่อนที่จะทำตามบทช่วยสอนนี้.

• การสาธิต
• แหล่งดาวน์โหลด

ถ้าคุณพร้อมแล้วเริ่มกันเลย.

สินทรัพย์

มาเตรียมสินทรัพย์ที่จำเป็นสำหรับปฏิทินกัน.

ก่อนอื่นการออกแบบปฏิทินจะอ้างถึงไฟล์ PSD นี้จาก Premium Pixels ดังนั้นเราควรดาวน์โหลดให้ดีขึ้นก่อนเพื่อช่วยให้เรานำตัวอย่างสีที่เราต้องการ จากนั้นดาวน์โหลดสองรูปแบบจาก บอบบาง รูปแบบ ที่เราจะใช้เป็นพื้นหลังของปฏิทินของเรา ในตัวอย่างนี้เราตัดสินใจที่จะใช้รูปแบบต่อไปนี้: ผ้าเดนิมสีดำและหนังสีเข้ม.

เราจะต้องใช้เครื่องมือในการพัฒนาเว็บเช่น Firebug เพื่อตรวจสอบคลาส / รหัสองค์ประกอบที่สร้างโดย jQuery UI.

ฉันคิดว่าเรามีการเตรียมการที่เพียงพอ ตอนนี้เรามาที่ขั้นตอนแรกกันเถอะ.

ขั้นตอนที่ 1: jQuery UI Datepicker

ก่อนอื่นให้ไปที่หน้าดาวน์โหลด jQuery UI ในหน้านี้คุณจะพบกับตัวเลือกต่างๆดังนี้ UI หลัก, วิดเจ็ต, การโต้ตอบและเอฟเฟกต์.

เราควร ยกเลิกการเลือกส่วนประกอบทั้งหมด, ในขณะที่เราไม่ต้องการทั้งหมด.

จากนั้นใน วิดเจ็ต ส่วนเลือกเฉพาะ datepicker jQuery UI จะเลือกการพึ่งพาที่จำเป็นโดยอัตโนมัติจากนั้น ดาวน์โหลด ไฟล์.

เชื่อมโยงไฟล์ที่ดาวน์โหลดทั้งหมด - ยกเว้น CSS - ไปยังเอกสารเปล่า HTML ของคุณดังต่อไปนี้:

ขั้นตอนที่ 2: การปรับแต่ง Datepicker

ในขั้นตอนนี้เราจะกำหนดค่า datepicker ด้วยตัวเลือกต่อไปนี้.

รหัสด้านบนจะแนะนำ jQuery เพื่อแสดงปฏิทินในองค์ประกอบด้วย เลือกวันที่ รหัส ดังนั้นเราต้องใส่สิ่งต่อไปนี้ div แท็กด้วย - datepicker ID - ในส่วนเนื้อหาเพื่อจัดทำปฏิทิน:

ตอนนี้ปฏิทินควรได้รับการสร้างขึ้นและมีลักษณะเช่นนี้ธรรมดาไม่มีสไตล์ แต่ยังมีฟังก์ชั่น.

ขั้นตอนที่ 3: สไตล์

ตอนนี้เรามาเริ่มจัดแต่งทรงผมในปฏิทินกัน เราจะเริ่มต้นด้วยการทำให้องค์ประกอบทั้งหมดเป็นปกติตามปกติและสร้างสไตล์ชีทใหม่ในตัวอย่างนี้ฉันตั้งชื่อมัน datepicker.css. จากนั้นเชื่อมโยงพวกเขาทั้งหมดกับเอกสาร HTML.

จากนั้นเราจะแนบพื้นหลังเข้ากับร่างกายก่อนเพื่อให้ HTML ของเราดูไม่ธรรมดา.

เนื้อหา background: url ('… /img/darkdenim3.png') ทำซ้ำ 0 0 # 555; 

ต่อไปเราจะระบุความกว้าง datepicker ของมันวางไว้ตรงกลางและเพิ่มเงาลดลงเพื่อให้ผลกระทบที่สำคัญในปฏิทิน.

.ui-datepicker width: 216px; ความสูง: อัตโนมัติ; กำไรขั้นต้น: 5px อัตโนมัติ 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 text-decoration: none; 

ปฏิทินใน jQuery UI ถูกสร้างขึ้นด้วย ตาราง. ดังนั้นมาเพิ่ม 100% ความกว้างสำหรับ ตาราง, ดังนั้นมันจะมีความกว้างสูงสุดเท่ากับเสื้อคลุมด้านบน นั่นคือ 216px

.ตาราง ui-datepicker width: 100%; 

จัดแต่งทรงผมส่วนหัว

datepicker มีส่วนหัวที่มี เดือนปี ของปฏิทิน ส่วนนี้จะมีพื้นผิวหนังสีเข้มที่เราดาวน์โหลดมาก่อนด้วยสีตัวอักษรสีขาวและ 1px เงาสีขาวที่ด้านบน.

.ui-datepicker-header background: url ('… /img/dark_leather.png') ทำซ้ำ 0 0 # 000; สี: # e0e0e0; น้ำหนักตัวอักษร: ตัวหนา; -webkit-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, .2) box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, .2) ข้อความเงา: 1px -1px 0px # 000; ตัวกรอง: dropshadow (color = # 000, offx = 1, offy = -1); line-height: 30px; ความกว้างชายแดน: 1px 0 0 0; สไตล์เส้นขอบ: ทึบ; เส้นขอบสี: # 111; 

ถัดไปให้เป็นศูนย์ เดือน ตำแหน่ง.

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

แทนที่ ต่อไป และ ก่อนหน้า ข้อความที่มีรูปลูกศรสไปรต์หั่นบางส่วนจาก PSD.

.ui-datepicker-prev, .ui-datepicker-next display: inline-block; ความกว้าง: 30px; ความสูง: 30px; จัดข้อความ: ศูนย์; เคอร์เซอร์: ตัวชี้; ภาพพื้นหลัง: url ('… /img/arrow.png'); พื้นหลังซ้ำ: ไม่ทำซ้ำ; ความสูงของเส้น: 600%; ล้น: ซ่อนอยู่; 

จากนั้นปรับตำแหน่งลูกศรตามลำดับ.

.ui-datepicker-prev float: left; พื้นหลังตำแหน่ง: ศูนย์ -30px;  .ui-datepicker-next float: right; พื้นหลังตำแหน่ง: ศูนย์ 0px; 

ในขณะที่ ชื่อวัน ส่วนถูกห่อภายใน thead, จากการอ้างอิงการออกแบบของเราจะมีการไล่ระดับสีขาวเล็กน้อย และเพื่อให้งานของเราง่ายขึ้นเราจะใช้เครื่องมือนี้เพื่อสร้างรหัสการไล่ระดับสี:

.ui-datepicker thead background-color: # f7f7f7; background-image: -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%); background-image: linear-gradient (บนสุด, # f7f7f7 0%, # f1f1f1 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb; 

ชื่อวัน ข้อความจะมีสีเทาเข้มของ # 666666 และจะมีสีขาวบาง ๆ ข้อความเงา เพื่อให้มันมีผลกด.

.ui-datepicker th text-transform: ตัวพิมพ์ใหญ่; ขนาดตัวอักษร: 6pt; การขยาย: 5px 0; สี: # 666666; ข้อความเงา: 1px 0px 0px #fff; ตัวกรอง: dropshadow (color = # fff, offx = 1, offy = 0); 

ณ จุดนี้ปฏิทินจะปรากฏดังนี้:

จัดแต่งทรงผมวันที่

วันที่ในปฏิทินจะถูกรวมไว้ภายใน td หรือข้อมูลตาราง ดังนั้นเราจะตั้งค่าช่องว่างภายในเป็น 0 เพื่อลบช่องว่างระหว่าง td และให้มันเป็นขอบด้านขวาของ 1px.

.ui-datepicker tbody td padding: 0; ขอบขวา: 1px solid #bbb; 

ยกเว้นคนสุดท้าย td, ซึ่งจะไม่มีขอบด้านขวา เราตั้งค่าขอบด้านขวาเป็น 0 สำหรับสิ่งนี้.

.ui-datepicker tbody td: ลูกคนสุดท้าย เส้นขอบขวา: 0px; 

แถวของตารางจะใกล้เคียงกัน มันจะมีขอบด้านล่าง 1px ยกเว้นแถวสุดท้าย.

.ui-datepicker tbody tr border-bottom: 1px solid #bbb;  .ui-datepicker tbody tr: ลูกคนสุดท้าย border-bottom: 0px; 

จัดแต่งทรงผมตามค่าเริ่มต้น, โฮเวอร์และแอคทีฟ

ในขั้นตอนนี้เราจะกำหนดวันที่โฮเวอร์และสไตล์ที่ใช้งานอยู่ เราจะกำหนดสถานะเริ่มต้นของวันที่ก่อนโดยการระบุมิติ จัดตำแหน่งข้อความให้อยู่ตรงกลางเพิ่มสีไล่ระดับสีและเงาสีขาวด้านใน.

.ui-datepicker td span, .ui-datepicker td a display: inline-block; น้ำหนักตัวอักษร: ตัวหนา; จัดข้อความ: ศูนย์; ความกว้าง: 30px; ความสูง: 30px; line-height: 30px; สี: # 666666; ข้อความเงา: 1px 1px 0px #fff; ตัวกรอง: dropshadow (color = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; พื้นหลัง: -moz-linear-gradient (บนสุด, #ededed 0%, #dedede 100%); พื้นหลัง: -webkit-gradient (เส้นตรงด้านบนซ้ายล่างซ้ายสีหยุด (0%, # ededed), color-stop (100%, # dedede)); พื้นหลัง: -webkit-linear-gradient (ด้านบน, #ededed 0%, # dedede 100%); พื้นหลัง: -o-linear-gradient (บนสุด, #ededed 0%, # dedede 100%); พื้นหลัง: -ms-linear-gradient (บนสุด, #ededed 0%, # dedede 100%); พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, #ededed 0%, # dedede 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: inset 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 background: # 6eafbf; -webkit-box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1) box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1) สี: # e0e0e0; ข้อความเงา: 0px 1px 0px # 4d7a85; ตัวกรอง: dropshadow (color = # 4d7a85, offx = 0, offy = 1); เส้นขอบ: 1px solid # 55838f; ตำแหน่ง: ญาติ; ขอบ: -1px; 

ตอนนี้ปฏิทินควรดูดีขึ้นมาก.

แก้ไขตำแหน่ง

ณ จุดนี้ดูวันที่อย่างระมัดระวัง เมื่อคุณคลิกที่วันที่ในคอลัมน์แรกหรือคอลัมน์สุดท้ายคุณจะสังเกตเห็นว่าสถานะการใช้งานล้นพิกเซลจากขอบปฏิทิน.

ดังนั้นที่นี่เราจะทำการแก้ไขเล็กน้อย.

ก่อนอื่นเราจะลดความกว้างของวันที่เป็น 29px, และตั้งค่าระยะขอบด้านขวาของคอลัมน์สุดท้ายและระยะขอบซ้ายของคอลัมน์แรกเป็น 0 เพื่อย้อนกลับ -1px ระยะขอบที่เราได้ตั้งไว้ก่อนหน้านี้สำหรับสถานะที่ใช้งาน.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; ระยะขอบซ้าย: 0;  .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; ระยะขอบขวา: 0;  

วันที่แถวสุดท้ายของปฏิทินจะมีวิธีการรักษาที่คล้ายคลึงกัน.

.ui-datepicker-calendar tr: ลูกสุดท้าย .ui-state-active height: 29px; ระยะขอบล่าง: 0; 

ตอนนี้เรามาดูผลลัพธ์ ตอนนี้ปฏิทินก็ดูสวยงามและเข้ากันได้ดีกับข้อมูลอ้างอิงการออกแบบของเรา และคุณสามารถดูตัวอย่างและดาวน์โหลดซอร์สเพื่อตรวจสอบโค้ดจากลิงก์ด้านล่างภาพ.

• การสาธิต
• แหล่งดาวน์โหลด

โบนัส: ขยายปฏิทิน

ดีวันนี้เราได้เรียนรู้มากมายเกี่ยวกับวิธีสร้างธีมที่กำหนดเองสำหรับ jQuery UI Datepicker แต่คุณไม่ควรหยุดที่นี่เนื่องจากยังมีอีกหลายสิ่งที่สามารถขยายจาก datepicker นี้ ขึ้นอยู่กับความสามารถของ jQuery และ CSS ของคุณคุณขยายปฏิทินให้เป็นเช่นนี้ - การป้อนข้อความด้วยการซ้อนวันที่แบบเลื่อน.

• การสาธิต
• แหล่งดาวน์โหลด

อ่านเพิ่มเติม

สำหรับการอ่านเพิ่มเติมเกี่ยวกับ jQuery UI คุณสามารถอ่านเอกสารฉบับสมบูรณ์ได้ที่นี่:

• เริ่มต้นกับ jQuery UI
• การสร้าง jQuery UI
• jQuery UI: การสร้างคลาส API

ความคิดสุดท้าย

ขอบคุณสำหรับการอ่านและทำตามบทช่วยสอนนี้ฉันหวังว่าคุณจะพบว่ามีประโยชน์ และหากคุณมีข้อเสนอแนะใด ๆ หรือต้องการเพิ่มสิ่งที่อาจหายไปจากบทช่วยสอนนี้อย่าลังเลที่จะชี้ให้เห็นในส่วนความคิดเห็นด้านล่าง ขอบคุณอีกครั้ง).