Categories
28°C, New York
Home Web Technology jQWidgets

jQWidgets

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 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;">
            w3wiki
        </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



Tags:
#jQWidgets #JQuery #Web Technologies

jQWidgets Introduction