How to make a Mini sized vertical controlgroups using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making a Mini sized vertical controlgroups using jQuery Mobile.

Approach:

First, add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example 1: In this example, we will be using Button for grouping buttons.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <link rel="stylesheet" href= 

"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 

    <script src= 

        "http://code.jquery.com/jquery-1.11.1.min.js"> 

    </script> 

    <script src= 

"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 

    </script> 

</head> 

<body> 

    <center> 

        <h1>GeeksforGeeks</h1> 

        <h4> 

            Mini controlgroup button  

            using jQuery Mobile 

        </h4> 

    </center> 

    <div data-role="controlgroup"> 

        <button data-role="button" 

            data-mini="true">No icon 

        </button> 

        <button data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="left" 

            id="gfg">Left 

        </button> 

        <button data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="right" 

            id="gfg">right 

        </button> 

        <button data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="top" 

            id="gfg">top 

        </button> 

        <button data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="bottom" 

            id="gfg">bottom 

        </button> 

        <button data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="notext"

            id="gfg">icon only 

        </button> 

    </div> 

</body> 

</html>

Output:

Example 2: In this example, we will be using Anchor for grouping buttons.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <link rel="stylesheet" href= 

"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 

    <script src= 

        "http://code.jquery.com/jquery-1.11.1.min.js"> 

    </script> 

    <script src= 

"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 

    </script> 

</head> 

<body> 

    <center> 

        <h1>GeeksforGeeks</h1> 

        <h4> 

            Mini controlgroup anchor  

            using jQuery Mobile 

        </h4> 

    </center> 

    <div data-role="controlgroup"> 

        <a href="https://www.geeksforgeeks.org/" 

            data-role="button" data-mini="true"> 

            No icon 

        </a> 

        <a href="https://www.geeksforgeeks.org/" 

            data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="left"> 

            Left 

        </a> 

        <a href="https://www.geeksforgeeks.org/" 

            data-role="button" data-icon="delete"

            data-mini="true" data-iconpos="right"> 

            right 

        </a> 

        <a href="https://www.geeksforgeeks.org/" 

            data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="top"> 

            top 

        </a> 

        <a href="https://www.geeksforgeeks.org/" 

            data-role="button" data-icon="delete" 

            data-mini="true" data-iconpos="bottom"> 

            bottom 

        </a> 

        <a href="https://www.geeksforgeeks.org/" 

            data-role="button" data-icon="delete"

            data-mini="true" data-iconpos="notext"> 

            icon only 

        </a> 

    </div> 

</body> 

</html>

Output:

Article Tags :

HTML

JQuery

Web Technologies

HTML-Misc

jQuery-Misc