jQWidgets

Last Updated : 15 Jul, 2024

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 widgets that help to create attractive UI designs.

Download and Install jQWidgets

Download the jQWidget file in zip format from the https://www.jqwidgets.com/download/ 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.

Installing jQWidgets using 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
```

Installing the jQWidgets Bower Package:

Open Node.js command prompt and run the following command -
```
bower install jqwidgets
```
To get the information of jQWidget bower package, use the following command
```
bower info jqwidgets
```

Example: This example describe the basic example. In this example, we will use jqxCalendar widget to create a calendar and added the back text on it using backText Property.

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/jqxdatetimeinput.js"></script>
    <script type="text/javascript"
            src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript"
            src="jqwidgets/globalization/globalize.js"></script>
    <script tyle="text/javascript"
            src="jqwidgets/jqx-all.js"></script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
        <h3>
            jQWidgets jqxCalendar backText Property
        </h3>
 
        <div id='jqxcal'></div>
    </center>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxcal").jqxCalendar({
                theme: 'energyblue',
                width: '400px',
                height: '300px',
                enableTooltips: true,
                backText: 'Back Option'
            });
        });
    </script>
</body>
 
</html>

Output:

jQWidgets Complete References

jQWidgets Introduction

hardiksm73

Improve

Article Tags :

jQWidgets

Download and Install jQWidgets

Installing jQWidgets using npm:

Installing the jQWidgets Bower Package:

jQWidgets Complete References

Similar Reads

Thank You!

What kind of Experience do you want to share?