jQWidgets jqxDropDownButton template Property

Last Updated : 29 Sep, 2021

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 template property is used to specify the template of the displayed dropdown button which is used as an option of the default styles. It is of string type and the default value is ‘default’.

There are several possible values that are applicable with the template property that is given below:

default: As the name suggests, this is the default template. The style will depend only on the value of the “theme” property.
primary: For displaying an extra visual weight, it uses a dark blue for styling.
success: For displaying the successful or positive action, it uses the green color for style.
warning: The orange style is used to indicates caution.
danger: For indicating a dangerous or negative action, it uses the red color for style
info: It is a blue button that is not tied to a semantic action or use.

Syntax:

It is used to set the template property.

$("Selector").jqxDropDownButton({ template: 'primary'});

It is used to get the template property.

var template = $('Selector').jqxDropDownButton('template');

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 template 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 template 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 Structutre</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", 
          template: "danger", 
        }); 
        $("#jqxT").jqxTree({}); 
        $("#jqxDdB").jqxDropDownButton("setContent", "Select"); 
  
        $("#jqxBtn").on("click", function () { 
          var temp = $("#jqxDdB").jqxDropDownButton("template"); 
          $("#log").html("Template name: " + temp); 
        }); 
      }); 
    </script> 
  </body> 
</html>