Введение в jQWidgets

jQWidgets — это платформа JavaScript для создания веб-приложений для ПК и мобильных устройств. Это очень мощный и оптимизированный фреймворк, независимый от платформы и широко поддерживаемый. Он имеет более 60 виджетов пользовательского интерфейса, которые помогают создавать привлекательный дизайн пользовательского интерфейса.

Содержание

Почему именно jQWidgets?
Загрузка и установка. Есть два способа установки jQWidgets.
Давайте разберемся с работой JQWidgets на примере

Почему именно jQWidgets?

jQWidgets не зависит от платформы, совместим с несколькими браузерами и работает на разных устройствах, таких как мобильные, планшеты и ПК. Он автоматически определяет тип устройства и версию браузера. Он небольшой по размеру и легко расширяемый. Мы можем загружать отдельные виджеты и темы по запросу, чтобы оптимизировать время загрузки и сэкономить память. Все jQWidgets оптимизированы для лучшего взаимодействия с пользователем при работе с различными устройствами, имеющими разные операционные системы и версии браузеров.

Загрузка и установка. Есть два способа установки jQWidgets.

Метод 1: Загрузите файл jQWidget в формате zip по ссылке ниже. После загрузки zip-файла распакуйте файлы и сохраните их в папке. После этого создайте новый HTML-файл, добавьте в него код jQWidget и включите ссылку на виджет внутри раздела заголовка.

https://www.jqwidgets.com/download/

Метод 2: установка jQWidgets с помощью npm. Убедитесь, что вы установили Node.js и npm.

Откройте командную строку Node.js и выполните следующую команду —

npm install jqwidgets-framework - demos & scripts
or
npm install jqwidgets-scripts - scripts
or
npm install jqwidgets-ng - angular modules

Чтобы получить информацию о пакете jQWidget npm, используйте следующую команду —

npm info jqwidgets-framework

Давайте разберемся с работой JQWidgets на примере

Пример. В приведенном ниже примере показано свойство jqxButton disabled в jQWidgets.

<!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>