Skip to content
Related Articles

Related Articles

jQWidgets jqxToolBar addTool() Method

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 26 Nov, 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 jqxToolBar is used to illustrate a jQuery widget that shows a toolbar where various tools can be spontaneously appended. Moreover, by default the jqxToolBar favor some widgets namely jqxButton, jqxToggleButton, jqxDropDownList, jqxComboBox as well as jqxInput. However, the custom tools can also be appended.

The addTool() method is used to add a tool to the displayed jqxToolBar. It does not return anything.

Syntax:

$('#Selector').jqxToolBar('addTool', "button", "first", false, 
   function (type, tool, menuToolIninitialization) {
    var width = 90;
    if (menuToolIninitialization === true) {
        width = "100%";
    }
    tool.text("New_Button");
    tool.jqxButton({ width: width });
});

Parameters:

  • Type: It is the stated type of the new tool. Where, the possible values can be a button, dropdownlist, toggleButton, combobox, input as well as custom. It is of type string.
  • Position: It is the stated position where the tool is to be inserted. The possible values here are first and last. It is of type string.
  • Separator: It states if a separator is to be included after the new tool. And the possible values here are true and false. It is of type Boolean.
  • Initialization callback function: It is the stated callback function that is to be invoked after the new tool has been initialized. It is of type function. Here, three parameters can be passed which are as follows:
    1. type: It is the stated type of the tool.
    2. tool: It is a stated jQuery object which represents the tool.
    3. menuToolIninitialization: It states if the callback function is invoked for the toolbar tool i.e. false or for the pop-up menu tool i.e. true. It is of type Boolean.

 

Linked Files: Download https://www.jqwidgets.com/download/  from the given 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/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtoolbar.js”></script>

The below example illustrates the jqxToolBar addTool() method in jQWidgets.

Example:

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>
    <script type="text/javascript" 
        src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" 
    src="jqwidgets/jqxtoolbar.js"></script>
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
  
        <h3>jQWidgets jqxToolBar addTool() method
        </h3>
  
        <div id="jqxtb"></div>
  
        <div>
            <input type="button" id="jqxBtn" 
                style="margin-top: 25px" 
                value="Click here" />
        </div>
        <br>
  
        <div id="log"></div>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxtb").jqxToolBar({
                width: "100%",
                theme: "energyblue",
                height: 70,
                tools: 
"button button | dropdownlist combobox | input",
                initTools:
                    function (type, index, tool, 
                    menuToolIninitialization) {
                        switch (index) {
                            case 0:
                                tool.text("Button1");
                                break;
                            case 1:
                                tool.text("Button2");
                                break;
                            case 2:
                                tool.jqxDropDownList({
                                    width: 100,
                                    source: ["Java", "Scala", "C++"],
                                    selectedIndex: 2
                                });
                                break;
                            case 3:
                                tool.jqxComboBox({
                                    width: 60,
                                    source: [4, 5, 8, 10, 15],
                                    selectedIndex: 3
                                });
                                break;
                            case 4:
                                tool.jqxInput({
                                    width: 140,
                                    placeHolder: "Search..."
                                });
                                break;
                        }
                    }
            });
  
            $("#jqxBtn").jqxButton({
                width: "140px",
                height: "30px",
            });
            $("#jqxBtn").on("click", function () {
                $('#jqxtb').jqxToolBar('addTool', 
                    "button", "first", true,
                    function (type, tool, menuToolIninitialization) {
                        var width = 90;
                        if (menuToolIninitialization === true) {
                            width = "90%";
                        }
                        tool.text("Button0");
                        tool.jqxButton({
                            width: width
                        });
                    });
            });
        });
    </script>
</body>
  
</html>


Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!