בניית ווידג'טים עם כרטיסיות תגובה עם GridTab

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

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

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

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

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

כדי לאתחל את הפלאגין, אתה פשוט להעביר את סה"כ גודל הרשת ביחד עם כל פרמטר אופציונלי (כולם רשומים ב- GitHub).

הנה פשוט סקריפט אתחולYou

 $ (document) .ready (פונקציה () $ ('# gridtab-1') gridtab (grid: 3);; 

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

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

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

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