جی کوئری موبایل-فرم های پایه

چاپ

جی کوئری موبایل به طور اتوماتیک فرم های HTML را استایل دهی می کند تا چشمگیر و کاربردی باشند. 

 

ساختار فرم ها در جی کوئری موبایل

جی کوئری موبایل از css استفاده می کند تا عناصر فرم HTML را استایل دهی کند. این استایل دهی ها باعث می شوند که فرم ها جذاب باشند و کار با آنها ساده باشد. 

در جی کوئری موبایل شما می توانید از کنترل های فرم زیر استفاده نمایید:

هنگام کار کردن با فرم های جی کوئری موبایل، شما باید موارد زیر را بدانید:

مثال

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>
خودتان امتحان کنید »

نکته: می توانید از یک placeholder برای ایجاد یک تذکر استفاده کنید. این تذکر درواقع مقدار مورد انتظاری که باید در فیلد input وارد شود را شرح می دهد. 

مثال

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
خودتان امتحان کنید »

برای محو کردن برچسب مورد نظر می توانید از کلاس "ui-hidden-accessible" استفاده کنید. این کلاس اغلب زمانی کاربرد دارد که شما بخواهید خصوصیت placeholder عنصر مورد نظر بعنوان برچسب به کار رود:

مثال

<label for="fname" class="ui-hidden-accessible"">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
خودتان امتحان کنید »

نکته: اگر می خواهید یک دکمه ی مخصوص پاک کردن(دکمه ای که به شکل ضربدر است و برای پاک کردن اطلاعات فیلد بکار می رود) را قرار دهید، می توانید از خصوصیت "data-clear-btn="true استفاده کنید:

مثال

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
خودتان امتحان کنید »
Note

دکمه ی مخصوص پاک کردن، به جز عنصر <textarea> می تواند به تمام عنصر های <input> اضافه شود. 

فیلد های جستجو، به طور پیش فرض این خصوصیت را دارند و مقدار آن برابر با "true" است. برای تغییر دادن آن به سادگی می توانید از "data-clear-btn="false استفاده کنید. 

دکمه های فرم جی کوئری موبایل

دکمه ها در فرم ها، به وسیله ی عناصر استاندارد اچ تی ام ال <input> ایجاد شده اند(مانند دکمه های: button و reset و submit). این دکمه ها به طور اتوماتیک استایل دهی می شوند. این دکمه ها طوری طراحی شده اند تا در هردوی دستگاه های موبایل و رایانه های رومیزی جذاب به نظر برسند و کار با آنها راحت باشد:

مثال

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
خودتان امتحان کنید »

برای اینکه استایل های دیگری را به یک عنصر <input> اضافه کنید، می توانید از خصوصیات *-data که در جدول زیر آمده اند استفاده کنید:

مقادیر پر رنگ در جدول زیر، مقادیر پیش فرض هستند. 

خصوصیتمقدارتوضیحات
data-corners true | false

مشخص می کند که آیا دکمه ی مورد نظر باید دارای گوشه های گرد شده باشد یا نه.
data-icon مرجع آیکن ها 

آیکن دکمه را مشخص می کند. 
data-iconpos left | right | top | bottom | notext

مکان گذاری آیکن مورد نظر را مشخص می کند. 
data-inline true | false

مشخص می کند که آیا دکمه ی مورد نظر باید خطی(inline) باشد یا نه. 
data-mini true | false

مشخص می کند که آیا دکمه ی مورد نظر باید کوچک باشد یا نه. 
data-shadow true | false

مشخص می کند که آیا دکمه ی مورد نظر باید دارای سایه باشد یا نه. 

اضافه یا کم کردن خصوصیات مورد نظر:

<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
خودتان امتحان کنید »

ظرف(container) های فیلد 

برای اینکه برچسب ها و عناصر فرم، در صفحه های نمایش بزرگتر، به درستی به نظر برسند آنها را در داخل یک عنصر <div> یا <fieldset> قرار دهید و به آن کلاس "ui-field-contain" را اضافه کنید:

مثال

<form method="post" action="demoform.asp">
  <div class="ui-field-contain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>
خودتان امتحان کنید »
Note

کلاس "ui-field-contain" کنترل های فرم و برچسب ها را بر اساس عرض صفحه استایل دهی می کند. وقتی که عرض صفحه بیشتر از 480px می شود،  کلاس مورد نظر برچسب را در خطی که کنترل فرم قرار دارد، قرار می دهد. هنگامی که عرض صفحه کمتر از 480px می شود، برچسب در بالای عنصر فرم قرار می گیرد. 

نکته: برای اینکه از استایل دهی شدن اتوماتیک عناصر قابل لمس/کلیک، جلوگیری کنید، می توانید از خصوصیت "data-role="none استفاده کنید:

مثال

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
خودتان امتحان کنید »
Note

ارسال فرم در جی کوئری موبایل
جی کوئری موبایل به طور اتوماتیک عمل ارسال فرم را با استفاده از AJAX انجام می دهد و تلاش می کند تا پاسخ سرور را در مدل DOM از اپلیکیشن مورد نظر ترکیب کند. 
نوشته شده توسط احسان عباسی
بازدید: 4858