博客

jQuery UI Dialog标题选项

  • Post category:jquery

以下是关于 jQuery UI Dialog 标题选项的详细攻略：

jQuery UI Dialog 标题选项

标题选项用于设置对话框的标题。可以使用该选项来设置对话框的标题文本、图标和关闭按钮。

语法

$(selector).dialog({
  title: "对话框标题",
  dialogClass: "对话框样式",
  icon: "图标类名",
  showCloseButton: true/false
});

参数

  • title: 对话框的标题文本。
  • dialogClass: 对话框的样式类名。
  • icon: 对话的图标类名。
  • showCloseButton: 是否显示关闭按钮。

示例一：设置对话框的标题文本

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Dialog 标题选项示例</title>
  <script src="https://code.jquery.com-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
  <div id="dialog" title="对话框标题">
    <p>This is an example dialog.</p>
  </div>
  <script>
    $( "#dialog" ).dialog({
      title: "新的对话框标题"
    });
  </script>
</body>
</html>

这将创建一个带有默认标题的对话框，并使用 title 选项将其标题更改为“新的对话框标题”。

示例二：设置对话框的图标和关闭按钮

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Dialog 标题选项示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
  <div id="dialog" title="对话框标题">
    <p>This is an example dialog.</p>
  </div>
  <script>
    $( "#dialog" ).dialog({
      title: "带有图标和关闭按钮的对话框",
      icon: "ui-icon-info",
      showCloseButton: true
    });
  </script>
</body>
</html>

这将创建一个带有默认标题的对话，并使用 icon 选项将其图标更改为“ui-icon-info”，使用 showCloseButton 选项显示关闭按钮。

总结：

标题选项用于设置对话框的标题。可以使用该选项来设置对话框的标题文本、图标和关闭按钮。可以使用 title、dialogClass、icon 和 showCloseButton 选项来设置对话框的标题。

Tags: