โฮมเพจ » การเข้ารหัส » วิธีการกำหนดและการกำหนดวันที่ jQuery UI Datepicker

    วิธีการกำหนดและการกำหนดวันที่ 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

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

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