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