Home  >  jQuery Mobile

jQuery Mobile Button Example

August 24, 2014
Buttons are simply HTML input elements. We can make more attractive and usable button by CSS3 on mobile device using jQuery Mobile Button. jQuery mobile framework convert automatically stylized button by class for mobile device and desktop computers. Buttons are created by input tag or button tag. jQuery mobile can also create buttons out of simple anchor links by applying data-role="button".

In jQuery mobile, button can be created in three ways-
1. By using the input tag in html code
<input type="button" value="Click Button" />
2. By using button tag with class ui-btn
<button class="ui-btn">Click Button</button>
3. By using anchor link with class ui-btn
<a href="#" class="ui-btn">Click Button</a>

Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>Concretepage</h1></header>
<div class="content" data-role="content">
<h3>Buttons</h3>
<input type="button" value="input Button" />
<button class="ui-btn">Button Tag</button>
<a href="#" data-role="button">Link Button</a>
</div>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>
</body>
</html>  
Output
Find the Output.
jQuery Mobile Button Example
In mobile page, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>Concretepage</h1></header>
<div class="content" data-role="content">
<h3>Inline Buttons</h3>
<a href="#" data-role="button" data-inline="true">Link Button1</a>
<a href="#" data-role="button" data-inline="true">Link Button2</a>
<a href="#" data-role="button" data-inline="true">Link Button3</a>
<a href="#" data-role="button" data-inline="true">Link Button4</a>
</div>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>
</body>
</html> 
Output
Find the Output.
jQuery Mobile Button Example

Button Control Groups

jQuery mobile button can also grouped together in control groups. It provides data-role ="controlgroup" for connecting button to each other. All buttons wrap in containing element and apply the data-role="controlgroup" to that container.
Two types of attribute are used to set button position in mobile application, one is horizontal and another is vertical. By default, these control groups form a vertical list, but if you apply the datatype="horizontal" attribute to the container the button will be rendered inline position.
Example
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>Concretepage</h1></header>
<div class="content" data-role="content">
<h3>Control Group Buttons</h3>
<div data-role="main" class="ui-content">
 <div data-role="controlgroup" data-type="vertical">
      <p>Vertical group (default):</p>
      <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>
	 <br>  
<div data-role="controlgroup" data-type="horizontal">
      <p>Horizontal group:</p>
      <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>
  </div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>
</body>
</html>  
Output
Find the Output.
jQuery Mobile Button Example
FIND MORE TUTORILAS





Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us