当前位置：首页 > jquery

jquery 控件

2026-04-07 21:19:48jquery

jQuery 控件概述

jQuery 控件是基于 jQuery 库构建的交互式 UI 组件，用于简化表单、导航、数据展示等功能的开发。常见的控件包括日期选择器、滑块、对话框、自动完成输入框等。

常用 jQuery 控件及插件

日期选择器（Datepicker）

插件：jQuery UI Datepicker
功能：提供可视化日期选择，支持自定义格式和事件绑定。

示例代码：

$("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText);
    }
});

滑块（Slider）

插件：jQuery UI Slider
功能：通过拖动滑块选择数值范围。

示例代码：

$("#slider").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function(event, ui) {
        $("#amount").val(ui.values[0] + " - " + ui.values[1]);
    }
});

对话框（Dialog）

插件：jQuery UI Dialog
功能：弹出模态或非模态对话框。

示例代码：

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "OK": function() { $(this).dialog("close"); }
    }
});
$("#open-dialog").click(function() {
    $("#dialog").dialog("open");
});

自动完成（Autocomplete）
- 插件：jQuery UI Autocomplete
- 功能：根据输入提示匹配的数据列表。
- 示例代码：
```
var availableTags = ["Apple", "Banana", "Cherry"];
$("#tags").autocomplete({
    source: availableTags
});
```

自定义控件开发

通过扩展 jQuery.fn 创建自定义控件：

jquery 控件

$.fn.customControl = function(options) {
    var settings = $.extend({
        color: "red",
        size: "medium"
    }, options);

    return this.each(function() {
        $(this).css({
            "color": settings.color,
            "font-size": settings.size === "medium" ? "16px" : "12px"
        });
    });
};

// 调用示例
$("#element").customControl({ color: "blue", size: "small" });