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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش طراحی متریال با Materialize (جلسه 16) - فرم - بخش دوم

0 244 ۹ اردیبهشت ۹۵

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

در این مطلب با ادامه استایلهای مرتبط با فرمها در خدمتتون هستم.

استایل های موجود برای المنت Select

المنت Select با استایل پیش فرض مرورگر:

همونطور که دیدین به المنت select مورد نظر کلاس browser-default رو دادیم، این مورد باعث میشه که این المنت با همون استایل خود مرورگر نمایش داده بشه.

خروجی:s1

میبینید که استایل پیش فرض برای اون اعمال شده.

المنت Select با استایل Materialize:

اگه بخواید این استایلها به select اعمال بشن باید از Javascript هم استفاده کنید. بعد از اینکه jquery و materialize.js رو وارد کردید، کد زیر رو باید قرار بدین:

همونطور که دیدید همه المنتهای Select رو انتخاب کرده و متد materialize_select رو برای اونا فراخوانی کرده.

خروجی:s2

میبینید که چقدر زیباتر میشه، حالا اگر بر روی اون کلیک کنیم، بصورت زیر باز میشه:s3

المنت Select غیر فعال با استایل پیش فرض مرورگر:

خروجی:s4

المنت Select غیر فعال با استایل Materialize:

خروجی:s5

المنت Select با قابلیت انتخاب چند مورد:

میبینید که برای select ویژگی multiple قرار داده شده. زمانی که بر روی Select کلیک میکنید، زیرمجموعه های اون بصورت زیر باز میشن:s6

حلا میتونین هر کدوم رو که خواستین انتخاب کنید و با انتخاب هر کدوم تیک اون زده میشه.

المنت Select با optgroup:

همونطور که دیدین option های موجود در select با استفاده از المنت optgroup، گروه بندی شدن. اگر بر روی المنت Select کلیک کنیم، بصصورت زیر باز میشه:S7

المنت Select با تصویر:

همونطور که دیدید درون ویژگی data-icon تصویر مورد نظر خودمون رو قرار دادیم. خروجی بصورت زیر خواهد بود:s8

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

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram