Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQWidgets Introduction

  • Last Updated : 16 Dec, 2021

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.

jQWidgets Introduction

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:

Sample code output


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!