jQWidgets

  • Last Updated : 10 Mar, 2023

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 Tutorial

Download and Installation:

  • Download 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.

<!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:
backText property

jQWidgets Complete References:

 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above


My Personal Notes arrow_drop_up