jQWidgets Introduction

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. It has more than 60 UI widget that helps to create attractive UI design.

Why jQWidgets?

jQWidgets is platform-independent, cross-browser compatible and works on different devices like mobile, tablets and PCs. It automatically detects the device type and browser version. It is small in size and highly extensible. We can load the individual widgets and themes on demand in order to optimize the download time and save memory. All the jQWidgets are optimized for better user experience to work with the different devices having different operating systems and browsers version.

Download and Installation: There are following two ways of installing jQWidgets.

Method 1: Download jQWidget file in zip format from the below link. After downloading the zip file, extract the files and save them into the folder. After that create a new HTML file and add the jQWidget code into the file and include the widget link inside the head section.

https://www.jqwidgets.com/download/

Method 2: Installing jQWidgets using npm. Make sure that you have installed Node.js and npm.

Open Node.js command prompt and run the following command –

npm install jqwidgets-framework - demos & scripts
or
npm install jqwidgets-scripts - scripts
or
npm install jqwidgets-ng - angular modules

To get the information of jQWidget npm package, use the following command –
```
npm info jqwidgets-framework
```

Let’s understand the working of JQWidgets through an example.

Example: The below example illustrates the jqxButton disabled property in jQWidgets.

HTML

<!DOCTYPE html> 

<html> 

<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 jqxButton disabled Property 

        </h3> 

        <br /> 

        <input type="button" id="jqxBtn"

            style="padding: 5px 20px;"

            value="Click here" /> 

        <div id="log"></div> 

    </center> 

    <script type="text/javascript"> 

        $(document).ready(function () { 

            $("#jqxBtn").jqxButton({ 

                width: "100px", 

                height: "60px", 

                disabled: true, 

            }); 

            var d = $("#jqxBtn").jqxButton("disabled"); 

            $("#log").text("Button disabled: " + d); 

        }); 

    </script> 

</body> 

</html>

Output:

Article Tags :

JQuery

Web Technologies

jQuery-jQWidgets