Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding jQuery Mobile Buttons

  Author : Shailendra Chauhan
Posted On : 20 Dec 2013
Total Views : 6,033   
Updated On : 26 Sep 2016
 

Buttons are created with the help of standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Typically, anchor links (a elements) are used to make navigation buttons, and input or button elements are used to make buttons for form submission.

Creating a Button in jQuery Mobile

Creating a button in jQuery mobile is very simple. You can create a button in jQuery mobile by using following three HTML element:

  1. <button> element

  2. <input> element

  3. <a> element with data-role="button"

<div data-role="page">
 <div data-role="header">
 <h1>Header text</h1>
 </div>
 <div data-role="content">
 <button>Simple Button</button>

 <input type="button" value="Input Button">

 <a href="#" data-role="button">Anchor Button</a>
 </div>
 <div data-role="footer">
 <h1>Footer Text</h1>
 </div>
</div>

Adding Icons to jQuery Mobile Buttons

You can also add icons to jQuery mobile buttons by using data-icon attribute as given below:

<div data-role="page">
 <div data-role="header">
 <h1>Header text</h1>
 </div>
 <div data-role="content">
 <button data-icon="home">Simple Button</button>

 <input type="button" value="Input Button" data-icon="info">

 <a href="#" data-role="button" data-icon="search">Anchor Button</a>
 </div>
 <div data-role="footer">
 <h1>Footer Text</h1>
 </div>
</div>

By default, all icons in buttons are placed to the left. But you can also set icon positions by setting values to data-iconpos attribute as given below:

  1. Top

  2. Right

  3. Bottom

  4. Left

<div data-role="page">
 <div data-role="header">
 <h1>Header text</h1>
 </div>
 <div data-role="content">
 <button data-icon="home" data-iconpos="top">Simple Button</button>

 <input type="button" value="Input Button" data-icon="info" data-iconpos="right">

 <a href="#" data-role="button" data-icon="search" data-iconpos="bottom">Anchor Button</a>
 </div>
 <div data-role="footer">
 <h1>Footer Text</h1>
 </div>
</div>

Grouping Buttons

jQuery Mobile allows you to make a group of buttons by using data-role="controlgroup" attribute together with data-type="horizontal|vertical" to specify whether to group buttons horizontally or vertically.

<div data-role="page">
 <div data-role="header">
 <div align="center">jQuery Mobile Buttons</div>
 </div>
 <div data-role="content">
 <div data-role="controlgroup" data-type="vertical">
 <a href="#yourlink" data-role="button">Button 1</a>
 <a href="#yourlink" data-role="button">Button 2</a>
 <a href="#yourlink" data-role="button">Button 3</a>
 </div>
 </div>
</div>
What do you think?

I hope you have enjoyed the article and would able to have a clear picture about jQuery Mobile buttons. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
3 AUG
ASP.NET Core with Angular4 Development (Online)

07:00 AM - 9:00 AM IST(+5:30 GMT)

Know More
29 JUL
Angular2 and Angular4 Development (Online)

08:00 AM - 10:00 AM IST(+5.30 GMT)

Know More
29 JUL
ASP.NET MVC with Angular4 Development (Classroom)

09:30 AM - 11:00 AM IST (+5:30GMT)

Know More
29 JUL
Xamarin Forms : Build Cross-platform Apps (Classroom)

09:00 AM - 11:00 AM IST(+5:30 GMT)

Know More
26 JUL
ASP.NET MVC with Angular4 Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

Know More
22 JUL
MEAN Stack 2 Development (Classroom)

04:00 PM - 05:30 PM IST(+5:30GMT)

20 JUL
Hadoop Development cum Administration (Online)

07:00 AM - 09:00 AM IST(+5:30 GMT)

17 JUL
NodeJS with Angular4 Development (Online)

08:00 PM - 09:30 PM IST(+5.30 GMT)

15 JUL
ASP.NET MVC with Angular4 Development (Online)

03:30 PM - 05:30 PM IST(+5.30 GMT)

1 JUL
ASP.NET MVC with Angular4 Development (Classroom)

08:00 AM - 09:30 AM IST

1 JUL
MEAN Stack 2 Development (Classroom)

11:00 AM - 12:30 PM IST(+5:30 GMT)

30 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

09:30 PM - 11:00PM IST(+5:30GMT)

6 JUN
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

20 MAY
NodeJS with Angular4 Development (Classroom)

05:00 PM - 07:00 PM

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+