jQuery UI对话框按钮选项

在使用jQuery UI对话框时，我们可以通过按钮选项定制对话框中的按钮。该选项包括以下内容：

• 文本：按钮上显示的文本
• 图标：按钮上显示的图标
• 回调函数：当用户点击按钮时调用的函数
• class属性：应用于按钮的类名称

如何添加按钮选项

在创建对话框时，我们可以使用buttons选项来添加按钮选项。buttons选项可以使用以下两种方式之一：

1. 数组
2. 对象

使用数组

可将按钮添加到对话框中，方法如下：

$( "#dialog" ).dialog({
  buttons: [ 
    {
      text: "OK",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
    },
    {
      text: "Cancel",
      icon: "ui-icon-close",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

使用对象

您还可以使用一个对象来添加按钮。对象方式可以让您更轻松地在对话框上使用单个按钮。方法如下：

$( "#dialog-confirm" ).dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

定制样式

如果需要自定义样式，您可以通过添加class属性，为每个按钮定义样式。例如：

$( "#my-dialog" ).dialog({
  buttons: [ 
    {
      text: "Reset",
      class: "reset-button",
      click: function() {
        $( "#my-form" )[0].reset();
      }
    },
    {
      text: "Submit",
      class: "submit-button",
      click: function() {
        $( "#my-form" ).submit();
      }
    }
  ]
});

然后，在CSS文件中添加以下代码即可为按钮添加自定义样式：

.reset-button{
  background-color: #ccc;
  color: #fff;
}

.submit-button{
  background-color: #209cee;
  color: #fff;
}

总结

按钮选项让您可以更轻松地为对话框添加功能按钮。它们还可以通过自定义样式来定制外观。