jQWidgets

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.

jQWidgets

 

  • 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



  • Last Updated : 27 Sep, 2023

Share your thoughts in the comments
Similar Reads