فُرم
فُرم به کاربر اجازه میدهد تا متنی را وارد کند، متنی را انتخاب کند یا مواردی را تیک بزند.
اینپوت
اینپوتها (inputs) به کاربران اجازه میدهند تا نوشتهای (متن ساده، ایمیل، رمز و حتی عدد) را وارد کنند. هر اینپوت، نیازمند یه لیبل (lable) دارد تا عنوان ورودی را نمایش دهد. با شروع عملیات ورود اطلاعات توسط کاربر، لیبل و خطوط اینپوت با یک انیمیشن روشن میشود و فعال بودن را مشخص میکند.
استفاده
اینپوتها را باید داخل یک بسته با کلاسهای joqd input-field
قرار داد تا بتوان آن را به کمک اسکریپتهای جیکوئری (jQuery) پیادهسازی کرد. این اسکریپت را باید حتما مقداردهی اولیه کرد.
خود اینپوت باید کلاس joqd input
را داشته باشد. همچنین به خاطر رعایت استانداردهای متریال دیزاین، باید یک لبهی نازک پایینی برای آن در نظر گرفت.
<form class="joqd row"> <div class="joqd desktop-6 laptop-6 tablet-6 mobile-12"> <div class="joqd input-field"> <input id="name" type="text" class="joqd input thin-bottom-border grey-border"> <label for="name" class="joqd grey-text">
نام</label> </div> </div> <div class="joqd desktop-6 laptop-6 tablet-6 mobile-12"> <div class="joqd input-field"> <input id="lastName" type="text" class="joqd input thin-bottom-border grey-border"> <label for="lastName" class="joqd grey-text">
نام خانوادگی</label> </div> </div> <div class="joqd desktop-12 laptop-12 tablet-12 mobile-12"> <div class="joqd input-field"> <input id="email" type="email" class="joqd input thin-bottom-border grey-border"> <label for="email" class="joqd grey-text">
ایمیل</label> </div> </div> <div class="joqd desktop-12 laptop-12 tablet-12 mobile-12"> <div class="joqd input-field"> <input id="password" type="password" class="joqd input thin-bottom-border grey-border"> <label for="password" class="joqd grey-text">
رمز عبور</label> </div> </div> </form>
$('.joqd.input').each(function(){
$(this).input();
})
غیرفعال
با گذاشتن صفت disabled
، اینپوتها کمرنگ، غیرقابل کلیک و غیرفعال میشوند.
<div class="joqd input-field"> <input id="fullName" type="text" class="joqd input thin-bottom-border grey-border" disabled> <label for="fullName" class="joqd grey-text">
نام و نام خانوادگی</label> </div>
$('.joqd.input').each(function(){
$(this).input();
})
با آیکون
برای آنکه اینپوتها آیکون داشته باشند، میتوان یک آیکون را به input-field
اضافه کرد. به این آیکون باید کلاسهای joqd prefix
و کلاسهای رنگ نیز اضافه شود.
<form class="joqd row"> <div class="joqd desktop-8 laptop-8 tablet-8 mobile-12"> <div class="joqd input-field"> <i class="joqd prefix grey-text gorbeh gorbeh_person"></i> <input id="Username" type="text" class="joqd input thin-bottom-border grey-border"> <label for="Username" class="joqd grey-text">
نام کاربری</label> </div> </div> <div class="joqd desktop-8 laptop-8 tablet-8 mobile-12"> <div class="joqd input-field"> <i class="joqd prefix grey-text gorbeh gorbeh_phone"></i> <input id="Usertel" type="tel" class="joqd input thin-bottom-border grey-border"> <label for="Usertel" class="joqd grey-text">
شماره تماس</label> </div> </div> </form>
$('.joqd.input').each(function(){
$(this).input();
})
مقدار اولیه
با مشخص کردن مقدار (value
) اینپوت، میتوان به آن مقداردهی اولیه کرد.
<div class="joqd input-field"> <input id="password" type="password" class="joqd input thin-bottom-border grey-border" value="youShouldNotSeeThis"> <label for="password" class="joqd grey-text">
رمز عبور</label> </div>
$('.joqd.input').each(function(){
$(this).input();
})
همیشه باز
در صورتی که مایلید اینپوتها همیشه باز باشند (چه با نوشتهی جاگیر چه با نوشتهی واقعی چه بدون نوشته)، کافیست به لیبل، کلاس always-open-input
را اضافه کنید.
<form class="joqd row"> <div class="joqd desktop-8 laptop-8 tablet-8 mobile-12"> <div class="joqd input-field"> <input id="OpenName" type="text" class="joqd input thin-bottom-border grey-border" value="جاوید ایزدفر"> <label for="OpenName" class="joqd grey-text always-open-input">
نام و نام خانوادگی</label> </div> </div> <div class="joqd desktop-8 laptop-8 tablet-8 mobile-12"> <div class="joqd input-field"> <input id="OpenName" type="text" class="joqd input thin-bottom-border grey-border" placeholder="نام و نام خانوادگی خود را وارد کنید"> <label for="OpenName" class="joqd grey-text always-open-input">
نام و نام خانوادگی</label> </div> </div> <div class="joqd desktop-8 laptop-8 tablet-8 mobile-12"> <div class="joqd input-field"> <input id="OpenName" type="text" class="joqd input thin-bottom-border grey-border"> <label for="OpenName" class="joqd grey-text always-open-input">
نام و نام خانوادگی</label> </div> </div> </form>
$('.joqd.input').each(function(){
$(this).input();
})
آپشنها
برای اینپوتها آپشنهای مختلفی وجود دارد.
آپشن |
مقدار پیشفرض |
توضیح |
---|---|---|
|
|
به کمک این آپشن، میتوان رنگ لیبل را زمانی که باز شده است را انتخاب کرد. |
|
|
به کمک این آپشن، میتوان رنگ لبهی پایین اینپوت را زمانی که باز شده است را انتخاب کرد. |
تکستاِریا
تکستاریاها (textarea) نوعی اینپوت هستند که میتوانند مقدار نسبتاً زیادی از متن را در خود جای دهند. هر تکستاریا، نیازمند یه لیبل (lable) دارد تا عنوان ورودی را نمایش دهد. با شروع عملیات ورود اطلاعات توسط کاربر، لیبل و خطوط تکستاریا با یک انیمیشن روشن میشود و فعال بودن را مشخص میکند.
استفاده
تکستاریاها را باید داخل یک بسته با کلاسهای joqd input-field
قرار داد تا بتوان آن را به کمک اسکریپتهای جیکوئری (jQuery) پیادهسازی کرد. این اسکریپت را باید حتما مقداردهی اولیه کرد.
خود تکستاریا باید کلاس joqd input
را داشته باشد. همچنین به خاطر رعایت استانداردهای متریال دیزاین، باید یک لبهی نازک پایینی برای آن در نظر گرفت.
<form class="joqd row"> <div class="joqd desktop-12 laptop-12 tablet-12 mobile-12"> <div class="joqd input-field"> <textarea id="textarea" class="joqd input thin-bottom-border grey-border"> <label for="textarea" class="joqd grey-text">
تکستاریا</label> </div> </div> </form>
$('.joqd.input').each(function(){
$(this).input();
})
غیرفعال
با گذاشتن صفت disabled
، تکستاریاها کمرنگ، غیرقابل کلیک و غیرفعال میشوند.
<div class="joqd input-field"> <textarea id="massage" class="joqd input thin-bottom-border grey-border" disabled> <label for="massage" class="joqd grey-text">
پیام</label> </div>
$('.joqd.input').each(function(){
$(this).input();
})
با آیکون
برای آنکه تکستاریاها آیکون داشته باشند، میتوان یک آیکون را به input-field
اضافه کرد. به این آیکون باید کلاسهای joqd prefix
و کلاسهای رنگ نیز اضافه شود.
<form class="joqd row"> <div class="joqd desktop-8 laptop-8 tablet-8 mobile-12"> <div class="joqd input-field"> <i class="joqd prefix grey-text gorbeh gorbeh_create"></i> <textarea id="comment" class="joqd input thin-bottom-border grey-border"> <label for="comment" class="joqd grey-text">
شماره تماس</label> </div> </div> </div>
$('.joqd.input').each(function(){
$(this).input();
})
آپشنها
برای تکستاریاها آپشنهای مختلفی وجود دارد.
آپشن |
مقدار پیشفرض |
توضیح |
---|---|---|
|
|
به کمک این آپشن، میتوان رنگ لیبل را زمانی که باز شده است را انتخاب کرد. |
|
|
به کمک این آپشن، میتوان رنگ لبهی پایین تکستاریا را زمانی که باز شده است را انتخاب کرد. |
چکباکس
چکباکسها (checkbox) به کاربر اجازه میدهند تا چندین انتخاب را بین یک مجموعه داشته باشند.
استفاده
چکباکسها را باید داخل یک بسته با کلاسهای joqd checkbox-field
قرار داد.
خود چکباکس باید کلاسهای joqd checkbox
را داشته باشند.
<div class="joqd checkbox-field"> <input id="check1" type="checkbox" class="joqd checkbox" /> <label for="check1" class="joqd grey-darken-2-text">
اولی<span class="joqd box soft-corner thick-border grey-darken-4-border"></span> </label> </div> <div class="joqd checkbox-field"> <input id="check2" type="checkbox" class="joqd checkbox" /> <label for="check2" class="joqd grey-darken-2-text">
دومی<span class="joqd box soft-corner thick-border grey-darken-4-border"></span> </label> </div>
عوض کردن رنگ
از آنجایی که چکباکسها وابسته به جیکوئری نیستند، باید برای حالات تیک خوردن آنها، به صورتی دستی سیاساس (CSS) وارد کرد.
<div class="joqd checkbox-field"> <input id="goRed" type="checkbox" class="joqd checkbox" /> <label for="goRed" class="joqd grey-darken-2-text">
قرمز شود<span class="joqd box soft-corner thick-border grey-darken-4-border"></span> </label> </div>
.joqd.checkbox:checked + label .box{
border-color: #f44336; /* کد رنگ قرمز به هگزادسیمال */
}
غیرفعال
با گذاشتن صفت disabled
چکباکسها کمرنگ، غیرقابل کلیک و غیرفعال میشوند.
<div class="joqd checkbox-field"> <input id="disabled" type="checkbox" class="joqd checkbox" disabled/> <label for="disabled" class="joqd grey-darken-2-text">
غیرفعال<span class="joqd box soft-corner thick-border grey-darken-4-border"></span> </label> </div>
سِلکت
سِلکتها (select) به کاربران اجازه میدهد تا از بین گزینههای از پیش تعیین شده، انتخابی داشته باشند.
استفاده
برای نمایش صحیح، سلکتها را باید داخل یک بسته با کلاسهای joqd input-field
قرار داد.
خود سلکت باید کلاسهای joqd input
را داشته باشند.
<div class="joqd desktop-8 laptop-8 tablet-12 mobile-12"> <div class="joqd input-field"> <select id="lang" class="joqd input thin-bottom-border grey-border"> <option value="0" class="joqd" disabled>زبان را مشخص کنید</option> <option value="1" class="joqd" selected>
فارسی</option> <option value="2" class="joqd" lang="en">
English</option> <option value="3" class="joqd" lang="fr">
French</option> </select> <span class="joqd caret"></span> <label for="lang" class="joqd grey-text always-open-input">زبان</label> </div> </div>
$('select').each(function(){
$(this).select();
})
آپشنها
برای سلکتها آپشنهای مختلفی وجود دارد.
آپشن |
مقدار پیشفرض |
توضیح |
---|---|---|
|
|
به کمک این آپشن، میتوان رنگ پسزمینهی سلکت را انتخاب کرد. |
|
|
به کمک این آپشن، میتواند به هر یک از گزینههای سلکت، کلاسهای لازم در حالت معمولی داد. |
|
|
به کمک این آپشن، میتواند به هر یک از گزینههای سلکت، کلاسهای لازم در حالت انتخاب شده داد. |
|
|
به کمک این آپشن، میتواند به هر یک از گزینههای سلکت، کلاسهای لازم در حالت غیرفعال داد. |
سوییچ
سوییچهای خاموش/روشن (on/off switch) حالت وضعیت یک گزینهی خاص را تغییر میدهند.
استفاده
برای نمایش صحیح، سوییچها را باید داخل یک بسته با کلاسهای joqd input-switch
قرار داد.
<div class="joqd desktop-8 laptop-8 tablet-12 mobile-12"> <div class="joqd switch-field"> <label for="doesit" class="joqd grey-text switch">
خیر<input id="doesit" type="checkbox"> <div class="joqd lever round-corner grey-lighten-1"> <div class="joqd trigger grey-darken-1 circle-corner"></div> </div>
بله</label> </div> </div>
عوض کردن رنگ
از آنجایی که سوییچها وابسته به جیکوئری نیستند، باید برای حالت روشن بودن آنها، به صورتی دستی سیاساس (CSS) وارد کرد.
<div class="joqd desktop-8 laptop-8 tablet-12 mobile-12"> <div class="joqd switch-field"> <label for="offAndOn" class="joqd grey-text switch">
خاموش<input id="offAndOn" type="checkbox"> <div class="joqd lever round-corner grey-lighten-1"> <div class="joqd trigger grey-darken-1 circle-corner"></div> </div>
روشن</label> </div> </div>
.joqd.switch-field label.joqd.switch input:checked + .joqd.lever .joqd.trigger{
background-color: #e91e63; /* کد رنگ صورتی به هگزادسیمال */
}
.joqd.switch-field label.joqd.switch input:checked + .joqd.lever {
background-color: #f06292; /* کد رنگ صورتی روشن به هگزادسیمال */
}