Open In App

jQWidgets jqxDropDownButton theme Property

Improve
Improve
Like Article
Like
Save
Share
Report

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDropDownButton is used to illustrate a jQuery widget that contains a number of selectable as well as expandable items displayed in the dropdown button.

The theme property is used to set or return the theme of the displayed dropdown button. It accepts string type value and the default value is empty (‘ ‘). In order to use this property, we need to incorporate the theme stylesheet i.e. ( jqx.energyblue.css ) into the header section. The theme file is included after the ‘jqx.base.css’ file.

The pair of CSS files are used by jQWidgets, namely, jqx.base.css and jqx.[theme name].css. The base stylesheet is used to generate the styles that relate to the layout of the widget such as border-width, padding, margin, position. The widget’s colors and backgrounds can be applied by using the second CSS file.

Syntax:

  • It is used to set the theme property.
$('Selector').jqxDropDownButton({ theme: String });
  • It is used to get the theme property.
var theme = $('Selector').jqxDropDownButton('theme');

  
 

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

 

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” /> 
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script> 
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script> 
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script> 
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script> 
 

 

Example: The below example illustrates the jqxDropDownButton theme property in jQWidgets.

 

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href=
"jqwidgets/styles/jqx.base.css"
      type="text/css" />
    <script type="text/javascript"
            src="scripts/jquery-1.11.1.min.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js">
    </script>
  </head>
 
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h3>jQWidgets jqxDropDownButton theme property</h3>
      <br />
      <div>
        <input
          type="button"
          id="jqxBtn"
          style="margin-bottom: 25px"
          value="Please click here" />
      </div>
      <div id="log"></div>
      <div style="float: center"
           id="jqxDdB">
        <div id="jqxT">
          <ul>
            <li>GFG</li>
            <li>Languages
              <ul>
                <li>C</li>
                <li>Java</li>
              </ul>
            </li>
            <li>Subjects
              <ul>
                <li>Data Structure</li>
                <li>Algorithm</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </center>
 
    <script type="text/javascript">
      $(document).ready(function () {
        $("#jqxBtn").jqxButton({
          width: "200px",
          height: "40px",
        });
 
        $("#jqxDdB").jqxDropDownButton({
          height: "25px",
          width: "70px",
          theme: "energyblue",
        });
        $("#jqxT").jqxTree({});
        $("#jqxDdB").jqxDropDownButton("setContent", "Select");
 
        $("#jqxBtn").on("click", function () {
          var th = $("#jqxDdB").jqxDropDownButton("theme");
          $("#log").html("Theme: " + th);
        });
      });
    </script>
  </body>
</html>


 

 

Output:

 

 

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbutton/jquery-button-api.htm?search=

 



Last Updated : 18 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads