Open In App

jQuery Mobile Button Widget theme Option

Last Updated : 25 May, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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 using the jQuery Mobile Button Widget theme Option to set the theme (button color) of the button.

Syntax:

$("selector").button({
    theme: "b"
});

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

 

Example:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  
    <script src="//code.jquery.com/jquery-1.10.2.min.js">
    </script>
  
    <script src=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
  
    <script>
        $(document).ready(function () {
            $(".gfg").button({
                theme: "b"
            });
  
            $(".gfg1").button({
                theme: "a"
            });
        });
    </script>
</head>
  
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>GeeksforGeeks</h1>
            <h3>jQuery Mobile Button Widget theme Option</h3>
        </div>
        <div role="main" class="ui-content">
            <form action="#" method="get">
                <input type="submit" 
                    value="Button 1" class="gfg">
                  
                <input type="button" 
                    value="Button 2" class="gfg1">
            </form>
        </div>
    </div>
</body>
  
</html>


Output:

Reference: https://api.jquerymobile.com/1.4/button/#option-theme



Previous Article
Next Article

Similar Reads

jQuery Mobile Popup Widget theme Option
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 using the jQuery Mobile Popup Widget theme option to set the color scheme for the popup contents. Syntax: $("selector").popup({ theme: "b" }); CDN Link: First, add jQuery Mobile scripts
1 min read
jQuery Mobile Textinput Widget theme Option
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 using the jQuery Mobile Textinput Widget theme option to set the color scheme for the text input widget. Syntax: $( ".selector" ).textinput({ theme: string }); CDN Links: First, add jQue
1 min read
jQuery Mobile Collapsible Widget theme Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. This article will be using the jQuery Mobile Collapsible Widget theme option to set the color scheme for the collapsible. The value between the a-z letter maps to the swatches the theme. It accepts the string type
1 min read
jQuery Mobile Slider Widget theme Option
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 using the jQuery Mobile Slider Widget theme option to set the color scheme (swatch) for the slider widget. The theme value uses a single letter from a-z. It accepts string type value and
1 min read
jQuery Mobile Rangeslider Widget theme Option
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 using the jQuery Mobile Rangeslider Widget theme option to set the color scheme (swatch) for the rangeslider widget. It accepts a single character from a-z that swatches the theme. It ac
1 min read
jQuery Mobile Controlgroup Widget theme Option
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 using the jQuery Mobile Controlgroup Widget theme Option to set the color option of Controlgroup. It accepts a single character from "a - z" that maps the color. It accepts string type v
1 min read
jQuery Mobile Flipswitch Widget theme Option
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 using the jQuery Mobile Flipswitch Widget theme option to set the color scheme for the flipswitch widget. Its possible value is a character that lies between "a - z". It accepts string t
1 min read
jQuery Mobile Selectmenu Widget theme Option
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 using jQuery Mobile Selectmenu Widget theme Option to set the color scheme for the selectmenu. The value between the a-z letter maps to the swatches the theme. It accepts the string type
1 min read
jQuery Mobile Button Widget corners Option
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 using the jQuery Mobile Button Widget corners option to set the style of the button corner. This option accepts the boolean value. It sets the border radius if its value is true. Syntax:
1 min read
jQuery Mobile Button Widget icon Option
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 using the jQuery Mobile Button Widget icon Option to add the icon inside the button. Syntax: $("selector").button({ icon: "icon_name" }); CDN Link: First, add jQuery Mobile scripts neede
1 min read