博客

jQuery UI的按钮小部件提供了许多选项，可以自定义按钮的外观和行为。其中，icons选项用于指定按钮使用的图标。本文将详细介绍icons选项的语法用法，并提供两个示例说明。

语法

以下是icons选项的基本法：

$(selector).button({
  icons: {
    primary: "icon-primary-class",
    secondary: "icon-secondary-class"
  }
});

在这个语法中，selector是要应用按钮的元素选择器。icon-primary-class和icon-secondary-class是要指定的CSS类名称，用于设置按钮的主要和次要图标。

示例1：使用默认图标

以下是一个示例，演示如何使用默认图标：

$( "#button" ).button({
  icons: {
    primary: "ui-icon-gear",
    secondary: "ui-icon-triangle-1-s"
  }
});

在这个示例中，我们使用icons选项指定了两个默认图标ui-icon-gear和ui-icon-triangle-1-s。这些图标可以在jQuery UI的CSS文件中找到。

示例2：使用自定义图标

以下是另一个示例，演示如何使用自定义图标：

$( "#button" ).button({
  icons: {
    primary: "my-icon-primary-class",
    secondary: "my-icon-secondary-class"
  }
});

在这个示例中，我们使用icons选项指定了两个自定义CSS类my-icon-primary-class和my-icon-secondary-class，用于设置按钮的主要和次要图标。这些自定义类可以在CSS文件中定义，以自定义按钮的外观和行为。

综所述，icons选项用于指定jQuery UI按钮使用的图标。本文详细介绍了icons选项的语法和用法，并提供了两个示例说明。