Count HTML המדינה שינויים בזמן אמת עם CSS
ספירה היא משימה בכל מקום ביישומי אינטרנט. כמה הודעות דוא"ל שלא נקראו יש לך? כמה משימות נותרו לא מסומנות ברשימת המטלות שלך? כמה טעמים סופגניים ארוזים בעגלת הקניות? כולם שאלות מכריעות משתמשים ראויים תשובות.
אז, פוסט זה יראה לך איך לספור דו ביסודי אלמנטים, המהווים את רוב המשתמשים שולטת כגון תיבות הסימון קלט טקסט, באמצעות דלפקי CSS.
אתה צריך לכוון את המדינות עם CSS תחילה, אשר אפשרי באמצעות pseudo- מחלקות ותכונות HTML שמאפשרים לנו לעשות זאת. המשך וניסוי עם הרעיון ולחקור את השיעורים המדומים השונים שיכולים להצביע על השינוי במצב של אלמנט, באופן דינמי.
נתחיל בתיבות הסימון הפשוטות ביותר.
1. תיבות סימון
תיבות תיוג נכנסות “מסומן” כאשר הם מתקתקים. ה : מסומנת פסאודו מציין את מצב הבדיקה.
תיבת הסימון # 1
תיבת הסימון # 2
תיבת סימון מס '3
מסומן:
לא בדוק:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; קלט [type = 'checkbox'] counter-increment: unTickedBoxCount; קלט [type = 'checkbox']: מסומן counter-increment: tickedBoxCount; #tickedBoxCount :: לפני content: counter (tickedBoxCount); #unTickedBoxCount :: לפני content: counter (unTickedBoxCount);
כמו שאמרתי קודם, המקרה הזה פשוט מאוד. אנחנו להגדיר שני דלפקים אלמנט השורש ואת כל תוספת עבור כל תיבת סימון עבור שתי המדינות שלה, בהתאמה. ערכי הדלפק הם אז המוצגים במקום ייעודי באמצעות תוכן נכס.
אם אתה רוצה להבין טוב יותר איך לעבוד מונים, יש להסתכל על ההודעה הקודמת שלנו.
למטה, אתה יכול לראות את התוצאה הסופית. בעת סימון וביטול הסימון של תיבות הסימון, הערכים של “מסומן” ו “לא בדוק” מונים הם שונה בזמן אמת.
2. קלט טקסט
אנחנו יכולים גם לספור כמה קלט טקסט היו מלאים וכמה נותרו ריקות על ידי המשתמש. פתרון זה לא יהיה פשוט כמו הקודם, כי, בניגוד תיבות הסימון, קלט טקסט אין כיתות פסאודו כדי לסמן כאשר הם מלאים.
לכן, אנחנו צריכים למצוא נתיב חלופי. יש שם פסאודו מציין כאשר לאלמנט יש טקסט מציין מיקום; זה נקרא : מציין מיקום-מוצג.
אם נשתמש במצייני מיקום בקלט הטקסט שלנו, נוכל לדעת מתי שדה הקלט ריק. זה קורה כאשר המשתמש עדיין לא הקלדת משהו לתוכה כי מציין המיקום ייעלם כאשר זה יקרה.
מילוי:
ריק:
:: root counter-reset: fullInputCount, emptyInputCount; קלט [type = 'text'] counter-increment: fillInputCount; קלט [type = 'text']: מציין מיקום-מוצג counter-increment: emptyInputCount; #filledInputCount :: לפני content: counter (fullInputCount); #emptyInputCount :: לפני content: counter (emptyInputCount);
התוצאה דומה לזו הקודמת - שני הדלפקים באופן אוטומטי מצטבר ופוחת כפי שאנו להוסיף או להסיר טקסט לשדות קלט או ממנו.
3. פרטים
מצבים חלופיים של אלמנט לא תמיד צריכים להיות מסומנים רק על ידי כיתות פסאודו. יכול להיות שיש תכונות HTML עושה את העבודה, כמו במקרה של
ה
לכן, פתוח תכונת HTML באלמנט. תכונה זו יכולה להיות ממוקדת ב- CSSשרים את בורר התכונות.
שאלה 1: שאלה 1
תשובה 1
שאלה 2: שאלה מס '2
תשובה מס '2
שאלה 3: שאלה מס '3
תשובה מס '3
פתח:
סגור:
:: root counter-reset: openDetailCount, closedDetailCount; פרטים counter-increment: closedDetailCount; פרטים [פתוח] counter-increment: openDetailCount; #closedDetailCount :: לפני content: counter (closedDetailCount); #openDetailCount :: לפני content: counter (openDetailCount);
התוצאה היא שני בזמן אמת CSS-counters שוב: פתוח וסגור.
.4 לחצני רדיו
ספירת לחצני הבחירה דורשת טכניקה אחרת. אנחנו בהחלט יכולים להשתמש : מסומנת פסאודו בכיתה השתמשנו תיבות הסימון. עם זאת, לחצני הבחירה הם נעשה שימוש שונה מאשר תיבות הסימון.
לחצני הרדיו הם שנועד להיות בקבוצות. המשתמש יכול לבחור רק אחד בתוך קבוצה. כל קבוצה פועלת כיחידה אחת. שתי המדינות ניתן לבחור גם בקבוצת לחצני רדיו אחד הכפתורים נבחר או אף אחד מהם לא נבחר.
לכן, אנחנו לא צריכים לספור לחצני רדיו על ידי לחצנים בודדים, אבל לפי קבוצות קבוצות. כדי להשיג זאת, אנו לעשות שימוש : nth של סוג 28. אסביר את זה אחר כך; בואו לראות את הקוד הראשון.
רדיו -1.1 רדיו-1.2 רדיו-1.3
רדיו 2.1 רדיו-2.2 רדיו-2.3
רדיו 2.1 רדיו-2.2 רדיו-2.3
נבחר:
לא נבחר:
אנחנו צריכים להקצות את אותו שם אל לחצני הבחירה באותה קבוצה. לכל קבוצה בקוד לעיל יש שלושה לחצני בחירה.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; קלט [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; קלט [type = 'radio']: nth-of-type (3n): מסומן counter-increment: selectedRadioCount; קלט [type = 'radio']: לא (nth-of-type (3n)): מסומן counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: לפני content: counter (selectedRadioCount); #unSelectedRadioCount :: לפני content: counter (unSelectedRadioCount);
שלושת כללי הסגנון הראשונים בקטע הקודמים זהים לאלו שהחלנו על תיבות הסימון, פרט למיקוד כל כפתור רדיו, אנו מכוונים ללחצן הבחירה האחרון בכל קבוצה, שהוא השלישי בענייננו (: nth-of-type (3n)). אז, אנחנו לא סופרים את כל כפתורי הרדיו אבל רק אחד לכל קבוצה.
עם זאת, זה לא ייתן לנו נכון בזמן אמת התוצאה, כמו שאנחנו עדיין לא נתנו כלל לספירת שני כפתורי הרדיו האחרים בקבוצה. אם אחד מהם נבדק יש לספור את התוצאה לא בדוק צריך ירידה בו זמנית.
זו הסיבה שאנחנו הוסף -1 ערך לאחר לא נבחרה בשורת הסגנון האחרונה שמכוונת לשני כפתורי הרדיו האחרים בקבוצה. כאשר אחד מהם נבדק, -1 רצון להקטין את התוצאה לא מסומנת.
מיקום הרוזן
ניתן לראות רק את התוצאה הנכונה לאחר סיום הספירה, כלומר לאחר עיבוד כל האלמנטים שיש לספור. זו הסיבה שאנחנו צריכים למקם את האלמנט שבו אנו נציג את המונים רק לאחר שהרכיבים ייספרו בקוד המקור של HTML.
ייתכן שלא תרצה להציג את המונים מתחת לרכיבים, אלא במקום אחר בדף. במקרה זה, אתה צריך למקם מחדש את המונים באמצעות מאפייני CSS כגון לתרגם, שולים, או עמדה.
אבל ההצעה שלי תהיה השתמש ברשת ה- CSS כך שתוכל ליצור את הפריסה של הדף שלך ללא תלות בסדר של אלמנטים בקוד המקור של HTML. לדוגמה, אתה יכול בקלות ליצור רשת המציבה את המונים מעל או ליד שדות קלט.
