جی کوئری موبایل-دکمه ها
اپلیکیشن های موبایل بر اساس سادگی در انتخاب آنچه نمایش می یابد، استوار است.
ایجاد یک دکمه در جی کوئری موبایل
به سه روش می توان در جی کوئری موبایل، یک دکمه را ایجاد کرد:
- استفاده از عنصر <input>
- استفاده از عنصر <button> به همراه "class="ui-btn
- استفاده از عنصر <a> به همراه "class="ui-btn
 |
دکمه ها در جی کوئری موبایل به طور اتوماتیک استایل دهی می شوند و ظاهری جذاب و کاربردی در هر دوی موبایل ها و کامپیوترهای رومیزی ایجاد می کنند. توصیه می کنیم که از عنصر <a> به همراه "class="ui-btn برای لینک کردن بین صفحات استفاده کنید و از عنصرهای <input> یا <button> برای ارسال کردن فرم، استفاده نمایید. نکته: در ورژن های قبل از 1.4 ما از خصوصیت "data-role="button برای ایجاد یک دکمه در جی کوئری موبایل استفاده می کردیم. از ورژن 1.4 به بعد، فریم ورک ما از کلاس های CSS برای استایل دهی به دکمه ها استفاده می کند(به استثنای دکمه های <input>). |
|---|
دکمه های ناوبری(هدایتی)
برای لینک کردن بین صفحات به وسیله ی دکمه ها، از عنصر <a> به همراه "class="ui-btn استفاده نمایید:
دکمه های گروهی
جی کوئری موبایل یک راه ساده را برای گروه بندی کردن دکمه ها ارائه می دهد.
برای اینکه مشخص کنید که آیا می خواهد دکمه ها به صورت افقی یا عمودی، گروه بندی شوند، در یک عنصر ظرف(container) از خصوصیت "data=role="controlgroup به همراه "dta-type="horizontal | vertical استفاده نمایید:
مثال
<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>
|
به طور پیش فرض، دکمه های گروهی به صورت عمودی گروه بندی می شوند و هیچ مارجین یا فضای خالی بین آنها نیست. و تنها اولین و آخرین دکمه ها، دارای گوشه های گرد شده هستند. این باعث می شود تا دکمه های گروهی ما ظاهری زیبا داشته باشند. |
|---|
دکمه های برگشت
برای ایجاد یک دکمه ی برگشت، از خصوصیت "data-rel="back استفاده نمایید(نکته: این باعث می شود که مقدار href از لنگر، نادیده گرفته شود):
دکمه های خطی
به طور پیش فرض، دکمه ها تمام عرض صفحه را اشغال می کنند. اگر می خواهید که دکمه ای داشته باشید که به اندازه ی محتوایش عرض داشته باشد، و یا می خواهید دو یا چند دکمه را در کنار یکدیگر قرار دهید، کلاس "ui-btn-inline" را اضافه نمایید:
کلاس های CSS بیشتر برای دکمه ها
| کلاس | توضیحات | مثال |
|---|---|---|
| ui-btn-b |
ایجاد رنگ پس زمینه ی مشکی برای دکمه به همراه متن سفید رنگ(مقدار پیش فرض عبارت است از پس زمینه ی خاکستری به همراه متن مشکی). |
امتحان کنید |
| ui-corner-all |
اضافه کردن گوشه های گرد شده به یک دکمه |
امتحان کنید |
| ui-mini |
دکمه را کوچکتر می کند. |
امتحان کنید |
| ui-shadow |
به دکمه ی مورد نظر سایه اضافه می کند. |
امتحان کنید |
|
اگر می خواهید بیش از یک کلاس را استفاده نمایید، کلاس ها را به وسیله ی یک فاصله ی خالی از یکدیگر جدا کنید، مانند: "class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow |
|---|
برای مشاهده ی یک مرجع کامل از کلاس های CSS برای استایل های متداول، مرجع کلاس های CSS جی کوئری موبایل را مشاهده نمایید.
در آموزش بعدی، خواهید آموخت که چطور آیکن ها را به دکمه ها اضافه نمایید.
- نوشته شده توسط احسان عباسی
- بازدید: 5739
