• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش طراحی متریال با Materialize (جلسه 22) - dialog

0 254 ۱۶ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

در مورد Toast

Materialize تعدادی کلاس CSS و متد Javascript قرار داده که با استفاده از اونا میتونیم برای سایت خودمون notification قرار بدیم و با استفاده از اونا با کاربرانمون ارتباط برقرار کنیم. Materialize به این notification ها toast میگه و اونا رو بصورت زیر باید درست کنیم:

میبینید که در ابتدا متد toast رو فراخوانی کردیم. این متد 4 ورودی رو دریافت میکنه و هر ورودی رو در پایین براتون توضیح میدم:

  • message : پیامی که میخاین به کاربر نمایش داده بشه
  • displayLength : مدت زمانی که این پیام نمایش داده میشه. این زمان بر حسب میلی ثانیه هست
  • className : کلاس css که باید به اون پیام اعمال بشه. بعنوان مثال اگه rounded رو قرار بدیم، گوشه های اون خمیده میشه
  • completeCallback : این تابع زمانی که پیام نمایش داده میشه و مخفی میشه اجرا میشه

مثالها

پیام عادی:

میبینید که یک لینک با استایل دکمه قرار دادیم و برای اون یک ویژگی onclick قرار دادیم. اگر بر روی این لینک کلیک بشه، تابع showToast اجرا میشه و 3000 میلی ثانیه باقی میمونه. کدهای Javascript اون بصورت زیر هست:

خروجی یک پیام هست که در مرورگر نمایش داده میشه. این پیامها واکنشگرا هستند و در هر سایزی بخوبی نمایش داده میشن و خودشون رو با سایز مرورگر وفق میدن. ظاهرش بصورت زیر هست:a1

پیام با متن italic:

کد JS:

خروجی:l2

پیام با گوشه گرد:

کد JS:

خروجی:l3

پیام با callback:

کد JS:

حالا زمانی که بر روی لینک مورد نظر کلیک بشه، ابتدا نمایش داده میشه و وقتی که مخفی میشه، یک alert با متن Toast dismissed نمایش داده میشه.

در مورد Tooltip

با استفاده از کلاسها و ویژگی هایی که Materialize قرار داده، میتونین برای المنتهای مورد نظرتون tooltip قرار بدین و زمانی که بر روی اونا هاور بشه، tooltip نمایش داده بشه. ویژگی ها بصورت زیر هستند:

  • tooltipped : مشخص میکنه که المنت مورد نظر tooltip خواهد داشت
  • data-position : محل قرار گیری tooltip که شامل: top و bottom و left و right
  • data-delay : مدت زمانی که tooltip باید بعد از mouse out نمایش داده بشه بر حسب میلی ثانیه
  • data-tooltip : متنی که قصد دارید در tooltip قرار داده بشه

مثالها

خروجی:l5

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram