יצירת בקר עוצמת הקול עם jQuery UI Slider

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

בהודעה זו אנו קוד המשתמש ממשק המשתמש PSD ולהפוך אותו למשהו פונקציונלי יותר. אנחנו הולכים על הקוד הבא PSD Slider UI להיות מיושם כמו הנושא jQuery UI Slider.

למרות זאת, אנא שימו לב כי הדרכה זו מיועדת רמות ביניים של ניסיון. אחרי שאמר את זה, זה עדיין קל יחסית לעקוב, כל עוד אתה מכיר למדי CSS ו- jQuery.

בסדר, עכשיו נתחיל.

שלב 1: ממשק המשתמש של jQuery

אנחנו כמובן צריכים את jQuery ואת jQuery UI Library, ויש לנו שתי אפשרויות לנצל אותם. ראשית, אנחנו יכולים לקשר את jQuery ואת ממשק המשתמש jQuery ישירות CDN הבאים: Google API Ajax API, CDN של מיקרוסופט, ו- jQuery CDN, יש הרבה יתרונות של שימוש בקובץ CDN מתארח כאשר אנחנו שמים את האתר שלנו באינטרנט חי.

אבל מאז אנחנו רק עובד על זה לא מקוון, אנו נשתמש השני במקום זאת.

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

שלב 2: סימון HTML

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

שלב 3: התקן את ממשק המשתמש Slider

קטע הקוד להלן יתקין את המחוון בדף, אך הוא חל רק על תצורת ברירת המחדל.

 $ (function () $ ("#slider") .slider (););

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

ראשית, אנו מאחסנים את רכיב המחוון כמשתנה.

 מחוון var = $ ('# slider'),

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

 slider.slider (range: "min", value: 35,);

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

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

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

לא נדבר איך לחתוך במאמר זה, אנחנו פשוט להתמקד בקוד. אם אתה לא בטוח איך לחתוך, לראות את screencast הבאה לפני שתמשיך.

המרת עיצוב מ PSD ל- HTML - Nettuts+

בסדר, עכשיו נתחיל להוסיף את הסגנונות.

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

 גוף background: url ('... /images/bg.jpg') חזור למעלה שמאלה;  קטע width: 150px; גובה: אוטומטי; שוליים: 100px אוטומטי 0; מקומות קרובים

הבא, אנו להחיל את סגנונות עבור את tooltip, את עוצמת הקול, הידית, את המחוון טווח וה המחוון עצמה.

אנחנו נעשה את החלק הזה על ידי חלק, החל ...

מחוון

מכיוון שלא הגדרנו את הערך המקסימלי עבור המחוון עצמו, ממשק המשתמש של jQuery יחול את ברירת המחדל; זה 100. לכן, אנו יכולים גם ליישם 100 (px) עבור המחוון רוחב.

 #slider border-width: 1px; border-style: Solid; border-color: # 333 # 333 # 777 # 333; border-radius: 25px; רוחב: 100px; תפקיד מוחלט גובה: 13px; צבע רקע: # 8e8d8d; background: url ('... /images/bg-track.png') חזור למעלה שמאלה; box-shadow: inset 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); משמאל: 20px;

הסבר קצר

Tooltip יהיה ממוקם מעל המחוון על ידי ציון שלה מיקום מוחלט עם -25px J המיקום העליון.

 .tooltip (למצב: מוחלט; בלוק תצוגה; top: -25px; רוחב: 35px; גובה: 20px; צבע: #fff; text-align: center; font: 10pt Tahoma, Arial, sans-serif; border-radius: 3px; border: 1px solid # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); box-sizing: border-box; רקע: לינארי-שיפוע (למעלה, rgba (69,72,77,0.5) 0%, rgba (0,0,0,0.5) 100%);

כרך

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

 .Volume display: inline-block; רוחב: 25px; גובה: 25px; מימין: -5px; background: url ('... /images/volume.png') no-repeat 0 -50px; תפקיד מוחלט margin-top: -5px;

ממשק המשתמש

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

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

 .ui-slider-handle [מיקום: מוחלט; z-index: 2; רוחב: 25px; גובה: 25px; הסמן: מצביע; רקע: url ('... /images/handle.png') no-repeat 50% 50%; מודגש; צבע: # 1C94C4; outline: none; top: -7px; margin-left: -12px;

טווח המחוונים

טווח המחוונים יהיה בעל צבע צבע מעט לבן.

 .ui-slider-range background: linear-gradient (למעלה, #ffffff 0%, # eaeaea 100%); תפקיד מוחלט border you01; top you01; גובה: 100%; border-radius: 25px;

שלב 5: אפקט

בשלב זה אנחנו הולכים להתחיל לעבוד על אפקט מיוחד של המחוון.

הסבר קצר

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

ראשית, אנו שומרים את הרכיב tooltip כמשתנה.

 tool tooltip = $ ('tooltip');

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

 slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);

אבל, אנחנו גם רוצים את tooltip להיות בתחילה מוסתר.

 tooltip.hide ();

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

 start: function (event, ui) tooltip.fadeIn ('מהיר'); ,

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

 stop: function (event, ui) tooltip.fadeOut ('מהיר'); ,

כרך

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

אבל, ראשית, אנו שומרים את הרכיב נפח כמו גם את הערך של המחוון כמשתנה.

 נפח = $ ('נפח');

ואז אנחנו מתחילים את ההצהרה המותנית.

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

 אם (ערך <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ;

שים את כולם ביחד

בסדר, במקרה שאתה מבולבל עם כל הדברים הנ"ל, לא. הנה קיצור הדרך. שים את כל הקודים הבאים במסמך.

 $ () (tooltip)) tooltip.hide () slider.slider (טווח: "min", min: 1, value: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('volume. '); tooltip.css (' left ', value) .text (ui.value), אם (ערך <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); );

בסדר, עכשיו בואו לראות את התוצאה בדפדפן.

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

סיכום

היום יש לנו בהצלחה יצרנית JQuery אלגנטי יותר אלגנטי אבל באותו זמן יש לנו גם בהצלחה לתרגם ממשק משתמש PSD לתוך בקר נפח פונקציונלי.

אנו מקווים שהמדריך הזה מעורר בך השראה ויכול לעזור לך להבין כיצד להפוך PSD למוצר שמיש יותר.

לבסוף, אם יש לך שאלה לגבי הדרכה זו, אל תהסס להוסיף אותה בסעיף הערות להלן.