تخفیف ویژه ماه محرم، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: moharam)
زمان باقی مانده

 السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

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

 

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




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

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

  • استفاده از عنصر <input>
  • استفاده از عنصر <button> به همراه "class="ui-btn
  • استفاده از عنصر <a> به همراه "class="ui-btn

<input>

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

<button>

<button class="ui-btn">Button</button>
خودتان امتحان کنید »

<a>

<a href="#anylink" class="ui-btn">Button</a>
خودتان امتحان کنید »
Note

دکمه ها در جی کوئری موبایل به طور اتوماتیک استایل دهی می شوند و ظاهری جذاب و کاربردی در هر دوی موبایل ها و کامپیوترهای رومیزی ایجاد می کنند. 

توصیه می کنیم که از عنصر <a> به همراه "class="ui-btn برای لینک کردن بین صفحات استفاده کنید و از عنصرهای <input> یا <button> برای ارسال کردن فرم، استفاده نمایید. 

نکته: در ورژن های قبل از 1.4 ما از خصوصیت "data-role="button برای ایجاد یک دکمه در جی کوئری موبایل استفاده می کردیم. از ورژن 1.4 به بعد، فریم ورک ما از کلاس های CSS برای استایل دهی به دکمه ها استفاده می کند(به استثنای دکمه های <input>).


دکمه های ناوبری(هدایتی)

برای لینک کردن بین صفحات به وسیله ی دکمه ها، از عنصر <a> به همراه "class="ui-btn استفاده نمایید:

مثال

<a href="#pagetwo" class="ui-btn">Go to Page Two</a>
خودتان امتحان کنید »

دکمه های گروهی

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

برای اینکه مشخص کنید که آیا می خواهد دکمه ها به صورت افقی یا عمودی، گروه بندی شوند، در یک عنصر ظرف(container) از خصوصیت "data=role="controlgroup به همراه "dta-type="horizontal | vertical استفاده نمایید:

مثال

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn">Button 1</a>
  <a href="#" class="ui-btn">Button 2</a>
  <a href="#" class="ui-btn">Button 3</a>
</div>
خودتان امتحان کنید »
Note

به طور پیش فرض، دکمه های گروهی به صورت عمودی گروه بندی می شوند و هیچ مارجین یا فضای خالی بین آنها نیست. و تنها اولین و آخرین دکمه ها، دارای گوشه های گرد شده هستند. این باعث می شود تا دکمه های گروهی ما ظاهری زیبا داشته باشند. 


دکمه های برگشت

برای ایجاد یک دکمه ی برگشت، از خصوصیت "data-rel="back استفاده نمایید(نکته: این باعث می شود که مقدار href از لنگر، نادیده گرفته شود):

مثال

<a href="#" class="ui-btn" data-rel="back">Go Back</a>
خودتان امتحان کنید »

دکمه های خطی

به طور پیش فرض، دکمه ها تمام عرض صفحه را اشغال می کنند. اگر می خواهید که دکمه ای داشته باشید که به اندازه ی محتوایش عرض داشته باشد، و یا می خواهید دو یا چند دکمه را در کنار یکدیگر قرار دهید، کلاس "ui-btn-inline" را اضافه نمایید:

مثال

<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>
خودتان امتحان کنید »

کلاس های CSS بیشتر برای دکمه ها

کلاستوضیحاتمثال
ui-btn-b

ایجاد رنگ پس زمینه ی مشکی برای دکمه به همراه متن سفید رنگ(مقدار پیش فرض عبارت است از پس زمینه ی خاکستری به همراه متن مشکی).

امتحان کنید
ui-corner-all

اضافه کردن گوشه های گرد شده به یک دکمه

امتحان کنید
ui-mini

دکمه را کوچکتر می کند. 

امتحان کنید
ui-shadow

به دکمه ی مورد نظر سایه اضافه می کند. 

امتحان کنید
Note

اگر می خواهید بیش از یک کلاس را استفاده نمایید، کلاس ها را به وسیله ی یک فاصله ی خالی از یکدیگر جدا کنید، مانند:

"class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow
به طور پیش فرض، دکمه های <input> دارای سایه و گوشه های گرد شده هستند. اما این نکته در مورد عناصر <a> و <button> صادق نیست. 

برای مشاهده ی یک مرجع کامل از کلاس های CSS برای استایل های متداول، مرجع کلاس های CSS جی کوئری موبایل را مشاهده نمایید.

در آموزش بعدی، خواهید آموخت که چطور آیکن ها را به دکمه ها اضافه نمایید. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی