כיצד להתאים אישית ולהדביק jQuery UI DatePicker

ממשק המשתמש jQuery הוא פשוט מדהים בשל קלות השימוש, הוא פופולרי בשימוש נרחב כמעט בכל אתר אינטרנט, כי צריך תכונות אינטראקטיביות.

בנוסף, במאמר זה, נבחן את אחת התכונות שסופקו, רכיב widget מסוג Datepicker.

ננסה ללמוד כיצד להתאים אישית את נושא לוח השנה, כך שתוכל ליצור את ערכת הנושא שתתאים לעיצוב הכולל שלך. עם זאת, אתה צריך קצת הבנה ב- JavaScript ואת היכרות עם CSS לפני הבאים הדרכה זו.

• הדגמה
• הורד מקור

אם אתה מוכן, בוא נתחיל.

הנכסים

בואו להכין חלק מהנכסים החיוניים עבור היומן.

ראשית, עיצוב לוח השנה יתייחס קובץ PSD זה מ Premium פיקסלים. אז כדאי לנו להוריד אותו קודם כדי לעזור לנו לקחת דוגמה של הצבעים שאנחנו צריכים. לאחר מכן, הורד שני דפוסי מ עדין דפוסי כי אנו נשתמש כרקע של לוח השנה שלנו. בדוגמה זו, החלטנו להשתמש בדפוסים הבאים: דנים שחורים ועור כהה.

אנחנו גם צריכים כלי פיתוח אינטרנט כמו Firebug כדי לבדוק את האלמנטים שיעורים / מזהים שנוצר על ידי ממשק המשתמש jQuery.

ובכן, אני חושב שיש לנו מספיק הכנה. עכשיו בואו נלך לשלב הראשון.

שלב 1: תאריך JQuery UI DatePicker

ראשית, עבור jQuery ממשק המשתמש להוריד דף. בדף זה יוצגו בפניך מספר אפשרויות, כדלקמן: UI Core, יישומונים, אינטראקציות ואפקטים.

אנחנו צריכים בטל את הבחירה בכל הרכיבים, כמו שאנחנו לא צריכים את כולם.

ואז, ב ווידג'טים בחר רק את התאריך. ממשק המשתמש של jQuery יבחר את התלויות החיוניות באופן אוטומטי ולאחר מכן הורד הקובץ.

קשר את כל הקבצים שהורדו - למעט CSS - אל מסמך HTML ריק, כדלקמן:

שלב 2: התאמה אישית של Datepicker

בשלב זה, נוכל להגדיר DatePicker עם האפשרויות הבאות.

הקוד לעיל ינחה את jQuery להציג את לוח השנה על אלמנט עם תאריך id. אז, אנחנו צריכים לשים את הדברים הבאים div תג עם מזהה datepicker - בסעיף הגוף כדי ליצור את לוח השנה:

עכשיו את לוח השנה צריך כבר שנוצר להופיע ככה, רגיל ללא כל סגנונות, אבל עדיין יש את הפונקציונליות.

שלב 3: סגנונות

עכשיו נתחיל לסדר את היומן. נתחיל על ידי נורמליזציה של כל האלמנטים - כרגיל - ויצירת גיליון סגנונות חדש, בדוגמה זו אני שם את זה datepicker.css. ואז לקשר את כולם למסמך HTML.

לאחר מכן, נצטרך הראשון לצרף רקע לגוף כך HTML שלנו לא נראה פשוט מדי.

body background: url ('... /img/darkdenim3.png') חזור 0 0 # 555; 

הבא, נוכל לציין את התאריך של datepicker, למקם אותו למרכז ולהוסיף צל ירידה לתת את האפקט prominece ליומן.

.ui-datepicker width: 216px; גובה: אוטומטי; שוליים: 5px אוטומטי 0; font: 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); box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); 

אנו גם נסיר את קישוט קו תחתון ברירת המחדל מכל תג עוגן.

.ui-datepicker a text-decoration: none; 

לוח השנה בממשק המשתמש jQuery נוצר עם שולחן. אז בואו נוסיף 100% רוחב שולחן, אז זה יהיה באותו רוחב מקסימלי כמו עטיפה לעיל; זה 216px

.ui-datepicker table 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); text-shadow: 1px -1px 0px # 000; מסנן: dropshadow (צבע = # 000, offx = 1, offy = -1); line-height: 30px; width-width: 1px 0 0 0; border-style: Solid; border-color: # 111; 

לאחר מכן, בואו למרכז את חודש עמדה.

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

החלף את ה הבא ו הקודם טקסט עם תמונות החץ ספרייט פרוס מן PSD.

.ui-datepicker-prev, .ui-datepicker-next display: inline-block; width: 30px; גובה: 30px; text-align: center; הסמן: מצביע; background-image: url ('... /img/arrow.png'); רקע-לחזור: לא לחזור; גובה גובה: 600%; overflow: hidden; 

לאחר מכן, כוונן את מיקום החץ בהתאמה.

.ui-datepicker-prev float: left; background-position: centre -30px;  .ui-datepicker-next float: right; background-position: center 0px; 

בזמן ש שמות יום סעיף הוא עטוף בתוך ליום, בהתבסס על התייחסות העיצוב שלנו, זה יהיה שיפוע מעט לבן. בנוסף, כדי לפשט את המשימה שלנו, נשתמש בכלי זה כדי ליצור את קוד שיפוע:

.ui-datepicker thead background-color: # f7f7f7; background-image: -Moz-linear-gradient (למעלה, # f7f7f7 0%, # f1f1f1 100%); תמונת רקע: -webkit-gradient (ליניארי, שמאלי למעלה, שמאל למטה, צבע-עצור (0%, # f7f7f7), צבע-עצור (100%, # f1f1f1)); background-image: -webkit-linear-gradient (למעלה, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linear-gradient (למעלה, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradient (למעלה, # f7f7f7 0%, # f1f1f1 100%); background-image: ליניארי-שיפוע (למעלה, # 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: uppercase; font-size: 6pt; ריפוד: 5px 0; צבע: # 666666; text-shadow: 1px 0px 0px #fff; מסנן: dropshadow (צבע = # fff, offx = 1, offy = 0); 

בשלב זה, לוח השנה יופיע כך:

עיצוב התאריך

תאריכי היומן עטופים td או נתוני טבלה. אז, נוכל להגדיר את הריפוד ל 0 כדי להסיר את החללים בין td ולתת לו את הגבול הנכון של 1px.

.ui-datepicker tbody td padding: 0; border-right: 1px solid #bbb; 

למעט האחרון td, אשר לא יהיה גבול הנכון. הגדרנו את הגבול הנכון 0 עבור זה.

.ui-datepicker tbody td: last-child border-right: 0px; 

שורת הטבלה תהיה כמעט זהה. זה יהיה תחתון הגבול 1px למעט בשורה האחרונה.

.ui-datepicker tbody tr border-bottom: 1px solid #bbb;  .ui-datepicker tbody tr: last-child border-bottom: 0px; 

עיצוב מצב ברירת המחדל, מעבר בריחוף ופעיל

בשלב זה נגדיר את תאריך הסמן ואת הסגנונות הפעילים. תחילה נגדיר את מצב ברירת המחדל של התאריך על ידי ציון המאפיין; מרכז את תאריך המיקום טקסט, להוסיף צבע צבע וצל לבן פנימי.

.ui-datepicker td span, .ui-datepicker td a display: inline-block; מודגש; text-align: center; width: 30px; גובה: 30px; line-height: 30px; צבע: # 666666; text-shadow: 1px 1px 0px #fff; מסנן: dropshadow (color = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; background: -moz-linear-gradient (למעלה, #ededed 0%, #dedede 100%); הרקע: -webkit-gradient (לינארי, שמאל למעלה, שמאל למטה, צבע להפסיק (0%, # ededed), צבע (100%, # dedede)); רקע: -webkit-linear-gradient (למעלה, #ededed 0%, # dedede 100%); רקע: ליניארי-שיפוע (למעלה, #ededed 0%, # dedede 100%); background: -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); box-shadow: Inset 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; צבע: # b4b3b3; 

כאשר תרחף עם העכבר מעל התאריך, הוא ייראה מעט לבן.

 .ui-datepicker-calendar .ui-state-hover background: # 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; text-shadow: 0px 1px 0px # 4d7a85; מסנן: dropshadow (צבע = # 4d7a85, offx = 0, offy = 1); border: 1px solid # 55838f; מקומות קרובים שוליים: -1x; 

עכשיו, לוח השנה צריך להיראות הרבה יותר טוב.

תיקון המיקום

בשלב זה, להסתכל על תאריך בזהירות. כאשר תלחץ על התאריך בעמודה הראשונה או בעמודה האחרונה, תבחין במצב הפעיל העולה על פיקסל מעל קצה לוח השנה.

אז הנה, אנחנו נעשה כמה תיקונים קטנים.

תחילה נקטין את רוחב התאריך 29px, ולהגדיר את השוליים הימניים של העמודה האחרונה ואת השוליים השמאליים של העמודה הראשונה 0 להפוך את -1px השוליים שהצבנו בעבר עבור המדינה הפעילה.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; margin-left: 0;  .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; margin-right: 0;  

התאריך בשורה האחרונה של לוח השנה יהיה גם טיפול דומה.

.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; margin-bottom: 0; 

עכשיו, בואו לראות את התוצאה. ובכן, לוח השנה נראה יפה ומתאים בצורה מושלמת כמו התייחסות העיצוב שלנו. בנוסף, תוכל לראות את ההדגמה ולהוריד את המקור כדי לבחון את הקוד מהקישורים שמתחת לתמונה.

• הדגמה
• הורד מקור

בונוס: הרחב את היומן

ובכן, היום למדנו די הרבה על איך ליצור נושא מותאם אישית עבור jQuery UI Datepicker. אבל אתה לא צריך לעצור כאן, שכן יש עדיין דברים רבים שניתן להרחיב מ datepicker זה. בהתאם jQuery שלך ו CSS מיומנות לך להרחיב את לוח השנה להיות ככה - קלט טקסט עם DatePicker שכבת.

• הדגמה
• הורד מקור

לקריאה נוספת

לקריאה נוספת על ממשק המשתמש jQuery. תוכל לקרוא את התיעוד המלא כאן:

• תחילת העבודה עם ממשק משתמש jQuery
• ממשק המשתמש
• ממשק המשתמש של jQuery: ערכות נושא של תיכנות API

סופי מחשבות

תודה לך על הקריאה הבאים הדרכה זו, אני מקווה שאתה מוצא את זה שימושי. בנוסף, אם יש לך משוב או רוצה להוסיף דברים שעשויים להיות חסרים במדריך זה, אל תהסס להצביע על כך בקטע ההערות למטה. שוב תודה).