Метод jQWidgets jqxDraw off()

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

Метод off() используется для удаления обработчика события из элемента указанного виджета jqxDraw.

Синтаксис:

Instance.off(Element, click, function);

Параметры: этот метод принимает три параметра, которые показаны ниже:

Element: это указанный элемент.
click: это указанное событие.
function: это указанная функция для удаления обработчика событий.

Возвращаемые значения: этот метод не возвращает никаких значений.

Связанные файлы: Загрузите jQWidgets по данной ссылке. В файле HTML найдите файлы сценариев в загруженной папке.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Пример: приведенный ниже пример иллюстрирует метод jQWidgets jqxDraw off().

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/jqxdraw.js">

    </script>

    <script type="text/javascript" src=

            "jqwidgets/jqx-all.js">

    </script>

</head>

<body>

    <center>

        <h1 style="color:green;">

            GeeksforGeeks

        </h1>

        <h3>jQWidgets jqxDraw off() Method</h3>

        <div id="jqx_Draw" style="height:200px; width:700px;">

        </div>

        <input type="button" id="Button"

               style="padding:5px 15px; margin-top:40px;"

               value="Remove the event handler">

        <div id="log"></div>

        <script type="text/javascript">

            $(document).ready(function () {

                $('#jqx_Draw').jqxDraw();

                var Instance = $('#jqx_Draw').jqxDraw('getInstance');

                // Creating a circle with cx of 130, cy of 50,

                // radius of 25 and parameters for filling the

                // circle with green color

                var Element = Instance.circle(130, 50, 25, {

                    fill: 'green'

                });

                var moveCircle = function () {

                    // Getting the Y coordinate of the circle's center

                    var Y_Coordinate = parseInt(Instance.getAttr(Element,

                        'cy'));

                    // Moving the circle down with 15 pixels

                    Instance.attr(Element, {

                        cy: Y_Coordinate + 15

                    });

                };

                // Adding a event handler

                Instance.on(Element, 'click', moveCircle);

                $("#Button").click(function () {

                    // Removing the applied event handler

                    Instance.off(Element, 'click', moveCircle);

                    Instance.refresh();

                    $("#log").html('Event handler has been removed.');

                });

            });

        </script>

    </center>

</body>

</html>

Вывод:

Метод jQWidgets jqxDraw off()