placeHolder jQuery plugin

18 ביוני 2012

תגיות: , , , , ,
אין תגובות

הקדמה:

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

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

 

(להורדת הקוד המלא.)

ראשית, נגדיר מה הם הדרישות ל – plugin שלנו.

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

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

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

 

דוגמאות קוד:

כיצד השימוש בקוד שלנו יראה.

$('input').placeHolder();

קוד זה יגדיר את כל ה – inputs בעמוד להיות עם place holder תוך שימוש בהגדרות ברירות המחדל.

 

$('input').placeHolder({ text: 'def text' });

קוד זה יגדיר גם את טקסט ברירת המחדל עבור אותם inputs.

 

$('input').placeHolder({

    text: 'def text',

    className: 'plHolder'

});

 

קוד זה גם יגדיר את ה – css class עבור תיבת הטקסט בזמן שהערך שלה הוא ערך ברירת המחדל

 

$('input').placeHolder({

    text: 'def text',

    css: {

        color: 'red',

        'font-size': '20px',

        'background-color': 'yellow'

    }

});

 

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

 

קוד ה – plugin:

כעת נראה איך הקוד בנוי.

את כל הקוד שלנו נעטוף כך:

 

(function ($) {

 

    $.fn.placeHolder = function (options) {

 

        // Code

 

    };

})(jQuery);

 

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

כפי שאפשר לראות אנחנו מגדירים את הפונקציה placeHolder שמקבלת כפרמטר options (שזה למעשה כל ההגדרות שהמשתמש שלח.

הנה קוד הפונקציה.

 

$.fn.placeHolder = function (options) {

 

    var settings = methods.getOptions(options);

 

    methods.addCssClass(settings.css);

 

    return this.each(function () {

        var $this = $(this);

 

        methods.init($this, settings);

 

        if ($this.attr('type') == 'password') {

            methods.setType($this, settings);

        }

    });

};

בהתחלה נקבל את ה – settings לפי ה – options, כלומר נשלח את מה שהמשתמש הגדיר לפונקציה שיודעת, למזג בין מה שהוגדר כברירת מחדל לבין מה שהמשתמש שלח. (בהמשך נראה מה הם אותם methods).

לאחר מכן נוסיף ל – head מחלקה חדשה של css בה יהיו כל ההגדרות שהמשתמש של עבור css.

כעת נשתמש ב – each כדי לרוץ על כל האלמנטים שהתקבלו מה – selector, עבור כל אחד מהם נפעיל את פונקציית init, ובמידה ומדובר בשדה מסוג סיסמא, גם נפעיל את פונקציית setType.

 

לפני שנעבור על כל המתודות, כמה נקודות.

בתוך הפונקציה placeHolder המשתנה this הוא אובייקט jQuery, לעומת זאת בתוך פונקציות פנימיות, this הוא אלמנט html, ולכן בתוך ה – each יש הגדרה שעוטפת את this כאובייקט jQuery.

חשוב להחזיר את this, כך שהמשתמש יוכל להמשיך להפעיל פונקציות jQuery עליו (כך).

$('input').placeHolder().fadeIn();

 

כעת נראה את הקוד של המתודות:

את כל המתודות נעטוף בבלוק מעל ההגדרה של placeHolder.

 

(function ($) {

    var methods =

    {

        init: function (input, settings) {

 

 

        },

        setType: function (input, settings) {

 

 

        },

        addCssClass: function (css) {

 

        },

        getOptions: function (options) {

 

        }

    };

 

    $.fn.placeHolder = function (options) {

 

        // Code

    };

})(jQuery);

 

כעת לגוף המתודות עצמם:

getOptions

getOptions: function (options) {

    var settings = $.extend({

        text: 'Press any text',

        css: { color: '#a5a5a5' },

        className: "

    }, options);

 

    return settings;

}

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

 

addCssClass

addCssClass: function (css) {

    var cssString = '.placeHolderClass{ ';

    for (var prop in css) {

        cssString += prop + ':' + css[prop] + '; ';

    }

 

    cssString += ' }';

 

    $('<style>').text(cssString).appendTo('head');

}

 

נשתמש בללואת for in המאפשרת לרוץ על מאפיינים של אובייקט, כך נרוץ על כל מאפייני המחלקה css, ונייצר מחלקה של css המורכבת מאותם הגדרות שהמשתמש שלח, לאחר מכן נוסיף את המחלקה ל – head (כפי שתיארתי כאן)

 

init

init: function (input, settings) {

 

    var setDefaultValueIfNeeded = function (input) {

        if ($.trim(input.val()) == ") {

            input.val(settings.text).addClass('placeHolderClass ' + settings.className);

        }

        else {

            input.removeClass('placeHolderClass ' + settings.className);

        }

    }

 

    setDefaultValueIfNeeded(input);

 

    input.blur(function () {

        setDefaultValueIfNeeded(input);

    });

 

    input.focus(function () {

        if (input.val() == settings.text) {

            input.val(");

        }

 

        input.removeClass('placeHolderClass ' + settings.className);

    });

}

 

פונקציה זו, אמורה לעשות את הקוד עצמו.

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

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

setType

setType: function (input, settings) {

 

    var changeTypeIfNeeded = function (input) {

 

        if (input.val() == settings.text) {

            input[0].type = 'text';

        }

        else {

            input[0].type = 'password';

        }

    }

 

    changeTypeIfNeeded(input);

 

    input.blur(function () {

        changeTypeIfNeeded(input);

    });

 

    input.focus(function () {

        changeTypeIfNeeded(input);

    });

}

אותו רעיון בדיוק גם כדי להחליף את סוג ה – input בין text ל – password, הנקודה היחידה שצריך לשים לב, היא – שאי אפשר לשנות את המאפיין type בעזרת jQuery, ולכן צריך לעשות זאת בעזרת javascript רגיל.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *