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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۹ اردیبهشت ۱۳۹۵

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

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

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

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

<div class="row">
    <select class="browser-default">
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

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

خروجی:s1

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

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

<div class="row">
    <select>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

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

$(document).ready(function() {
    $('select').material_select();
});

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

خروجی:s2

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

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

<div class="row">
    <select class="browser-default" disabled>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

خروجی:s4

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

<div class="row">
    <select disabled>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

خروجی:s5

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

<div class="row">
    <select multiple>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

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

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

المنت Select با optgroup:

<div class="row">
    <select>
        <optgroup label="Fruits">
            <option value="1">Mango</option>
            <option value="2">Orange</option>
            <option value="3">Apple</option>
        </optgroup>
        <optgroup label="Vegs">
            <option value="4">Brinjal</option>
            <option value="5">Potato</option>
            <option value="6">Tomato</option>
        </optgroup>
    </select>
</div>

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

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

<div class="row">
    <select class="icons">
        <option value="" disabled selected>Select Technology</option>
        <option value="1" data-icon="html5-mini-logo.jpg" class="circle">HTML</option>
        <option value="2">JavaScript</option>
        <option value="3">CSS</option>
    </select>
</div>

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

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

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

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

یا علی

Source

نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل