📅 最后修改于: 2023-12-03 15:16:45.906000 🧑 作者: Mango
jQuery UI 是一个用户界面（UI）库，为开发人员提供了丰富的交互效果和组件，使他们能够轻松地创建更吸引人的 Web 应用程序。其中，按钮是常用的组件之一，它提供了多种样式和配置选项。
showLabel 选项是 jQuery UI 按钮组件的一种配置选项，它控制按钮文本是否显示。默认情况下，按钮组件会根据按钮上的 HTML 元素来自动设置文本，而且该文本会垂直居中。如果你希望控制文本的显示方式，那么就可以使用 showLabel。
showLabel 选项有两种可能的值：
false：文本不显示。true：文本显示。以下示例展示了如何使用 showLabel 控制按钮的文本显示方式：
<!doctype html>
<html>
<head>
<title>jQuery UI 按钮 showLabel 选项示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#btn1" ).button({
showLabel: true
});
$( "#btn2" ).button({
showLabel: false
});
$( "#btn3" ).button();
} );
</script>
</head>
<body>
<button id="btn1">显示文本</button>
<button id="btn2">隐藏文本</button>
<button id="btn3">默认（显示）</button>
</body>
</html>
在以上示例中，我们创建了三个按钮，并通过 button() 方法初始化它们。第一个按钮使用了 showLabel: true，第二个按钮使用了 showLabel: false，第三个按钮未设置 showLabel。运行该示例，我们可以看到第一个按钮的文本显示了，第二个按钮的文本隐藏了，第三个按钮的文本显示了。
showLabel 选项控制了 jQuery UI 按钮组件的文本显示方式，它可以显示文本，也可以隐藏文本，甚至可以不设置。通过使用 showLabel，我们可以更灵活地控制按钮的外观和行为。