博客

jQWidgets jqxScrollBar destroy()方法

  • Post category:jquery

jQWidgets是一个基于jQuery的UI组件库，其包含了丰富的可视化组件，很多网站都在使用它。在其中，jqxScrollBar控件为滚动条控件，可以用于控制其他组件中内容的滚动，同时也支持一些对于控件的操作。

jQWidgets jqxScrollBar destroy()方法

destroy()方法是jqxScrollBar控件提供的方法之一，它的意义在于销毁（destroy）已经创建的滚动条控件。该方法被调用时，将清除掉所有和该控件相关的属性、事件、监听等，释放出内存空间。

方法格式

destroy()：销毁已经创建的滚动条控件。

调用方式

该方法作为jqxScrollBar控件的方法之一而存在，通常使用以下方式进行调用：

$('#jqxScrollBar').jqxScrollBar('destroy');

示例说明

这里提供两个简单的示例来说明destroy()方法：

示例一

下面的代码演示了如何创建一个jqxScrollBar滚动条控件，并在页面的按钮被点击时销毁该控件。控件初始化需要引入jqxscrollbar.js文件。

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscrollbar.js"></script>
</head>
<body>
    <div id="jqxScrollBar"></div>
    <input type="button" onclick="destroy()" value="销毁滚动条控件" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxScrollBar').jqxScrollBar({
                height: 200,
                width: 15,
                max: 100
            });
        });
        function destroy() {
            $('#jqxScrollBar').jqxScrollBar('destroy');
        }
    </script>
</body>

示例二

该示例中演示了如何在jqxGrid组件中使用jxqScrollBar控件，并在页面的按钮被点击时销毁该控件。

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxgrid.sort.js"></script>
</head>
<body>
    <div id="jqxGrid"></div>
    <input type="button" onclick="destroy()" value="销毁滚动条控件" />
    <script type="text/javascript">
        $(document).ready(function () {
            // 创建jqxGrid
            var orders = [
                {"name": "小红", "product": "商品1", "price": 100},
                {"name": "小明", "product": "商品2", "price": 300},
                {"name": "小李", "product": "商品3", "price": 200}
            ];
            var source = {
                localdata: orders,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxGrid").jqxGrid({
                source: dataAdapter,
                columns: [
                  { text: '姓名', dataField: 'name' },
                  { text: '商品', dataField: 'product' },
                  { text: '价格', dataField: 'price' }
                ],
                autoheight: true
            });

            // 创建jqxScrollBar
            $("#jqxGrid").find(".jqx-grid-content").after("<div id='jqScrollBar'></div>");
            $("#jqScrollBar").jqxScrollBar({
                      sliderSize: 30,
                      height: 300,
                      vertical: true,
                      thumbMinSize: 50,
                      max: $("#jqxGrid").find(".jqx-grid-content").height()
            });
        });
        function destroy() {
            $('#jqScrollBar').jqxScrollBar('destroy');
        }
    </script>
</body>

以上就是jQWidgets jqxScrollBar destroy()方法的详细攻略，希望可以帮助到您。

Tags: