آموزش طراحی وب

افکت زیبای placeholder

مدتیه که خیلی از دوستان درخواست دادن تا آموزش افکت placeholder که در سایت مدرسه به کار رفته رو در سایت قرار بدم. در این جلسه قصد دارم js این افکت و نحوه ی استفاده از اون رو خدمتتون آموزش بدم.

placeholder

افکت زیبای placeholder

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

مدتیه که خیلی از دوستان درخواست دادن تا آموزش افکت placeholder که در سایت مدرسه به کار رفته رو در سایت قرار بدم. در این جلسه قصد دارم js این افکت و نحوه ی استفاده از اون رو خدمتتون آموزش بدم.

 

معرفی پلاگین placeholdem

برای اینکار ما نیازی به کتابخانه جی کوئری نداریم چون placeholdem.js با جاوااسکریپت نوشته شده. این پلاگین یک افکت زیبا به placeholder شما میده . به این صورت که با کلیک روی فیلد متنی ، متن پیش فرض placeholder بصورت تایپی پاک میشه.

 

نحوه ی استفاده از placeholdem

پلاگین placeholdem رو از این لینک دانلود کنید.

پلاگین رو به صفحه اضافه کنید:

کد جاوااسکریپت زیر رو به صفحه اضافه کنید:

حالا برای هر فیلد متنی که میخواین تعریف کنید.

 

حالا زمانی که کاربر رو فیلد متنی شما کلیک می کنه، عبارت موجود در placeholder با افکت پاک میشه. نمونه ی این پلاگین هم میتونید تو سایت مدرسه مجازی ایرانیان مشاهده کنید.

موفق و پاینده باشید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۱

  • درود

    آقای همت یار آموزش جالبی بود ممنون، میشه بفرمایید دوره تبدیل PSD به کد چی شد ؟ کنسله یا طبق برنامه آموزش داده میشه ؟

    • سلام دوست عزیز
      خیر کنسل نیست . درگیر انتقال به دفتر مدرسه مجازی ایرانیان و دوره های حضوری بودیم ، همینطور به دلیل اینکه دامنه تغییر کرد نمیتونستیم مطلبی منتشر کنیم .
      انشالله به زودی اون فصل آموزشی هم آغاز میشه .

  • بسیار ممنون اول با placeholder معمولی اشتباه گرفتم گفتم این که نیاز به اسپریت نداره ولی ارزش نصب یک پلاگین رو نداره

  • الان که بیشتر فکر میکنم ارزشش رو داره
    اما نتونستم ازش استفاده کنم
    کد اول رو به این صورت در فایل header.php قرار دادم
    <script type="text/javascript" src="/js/placeholdem.js”>
    کد دوم حقیقتا نمیدونم کجا و چگونه باید استفاده کنم اما به این صورت داخل فایل header.php گذاشتم
    Placeholdem( document.querySelectorAll( ‘[placeholder]’ ) ); 12345Placeholdem( document.querySelectorAll( ‘[placeholder]’ ) );
    و استایل رو نگرفت
    میتونید راهنماییم کنید ؟

    • سلام دوست عزیز
      کد رو تغییر دادم مجدد تست کنید .
      موفق و پاینده باشید.

  • درود
    دوستان برای اینکه به مشکل نخورید و کار کنه کد ها رو به فوتر و قبل از بسته شدن تگ body اضافه کنید

  • با سلام و احترام .

    ممنون از آموزش و توضیحات خوبتون .

    لطفا برای هر آموزشی که قرار میدید ، یه دمو آنلاین هم بذارید تا بشه قبل از مطالعه کامل ، نتیجه کا رو ببینیم و در صورتی که کاربردی بود ، ازش استفاده کنیم .

    متشکرم .

    • سلام دوست عزیز
      خواهش می کنم.
      انتهای مطلبم عرض کردم خدمتتون، دموی آنلاین رو میتونید تو سایت خود مدرسه ببینید.
      موفق و پاینده باشید.

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

اموزش تصادفی