jQuery UI API - 对话框部件

Catégorie

Widgets

Utilisation

描述:在交互式覆盖层中打开内容。

添加于版本:1.0

对话框是一个浮动窗口，包含标题栏和内容区域。对话框窗口可以移动、调整大小，默认情况下可通过 'x' 图标关闭。

如果内容长度超过最大高度，将自动出现滚动条。

底部按钮栏和半透明模态覆盖层是常见的附加项。

Focus

当打开对话框时，焦点会自动移动到满足以下条件的第一个项目：

  1. withautofocusattribut
  2. Le premier dans le contenu de la boîte de dialogue:tabbableélément
  3. Le premier dans le volet des boutons de la boîte de dialogue:tabbableélément
  4. Le bouton de fermeture de la boîte de dialogue
  5. La boîte de dialogue elle-même

Lorsqu'il est ouvert, le widget Dialog s'assure que le focus est déplacé entre les éléments à l'intérieur de la boîte de dialogue via la touche Tab, en excluant les éléments extérieurs à la boîte de dialogue. Les boîtes de dialogue modales empêchent les utilisateurs de la souris de cliquer sur des éléments extérieurs à la boîte de dialogue.

Lorsque la boîte de dialogue est fermée, le focus revient automatiquement à l'élément qui avait le focus avant l'ouverture de la boîte de dialogue.

Masquer le bouton de fermeture

Dans certains cas, vous pouvez souhaiter masquer le bouton de fermeture, par exemple lorsqu'il y a déjà un bouton de fermeture dans le volet des boutons. La meilleure solution consiste à passer par CSS. Par exemple, vous pouvez définir une règle simple telle que :

.no-close .ui-dialog-titlebar-close {
  display: none;
}

Ensuite, vous pouvez ajouterno-closela classe à n'importe quelle boîte de dialogue pour masquer le bouton de fermeture :

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Thèmes

Le widget Dialog utilisejQuery UI CSS Frameworkpour définir le style de son apparence et de son rendu. Si vous devez utiliser des styles spécifiques à la boîte de dialogue, vous pouvez utiliser les noms de classes CSS suivants :

  • ui-dialog: Le conteneur externe de la boîte de dialogue.
    • ui-dialog-titlebar: La barre de titre contenant le titre de la boîte de dialogue et le bouton de fermeture.
      • ui-dialog-title: Le conteneur autour du titre du texte de la boîte de dialogue.
      • ui-dialog-titlebar-close: Le bouton de fermeture de la boîte de dialogue.
    • ui-dialog-content: Le conteneur autour du contenu de la boîte de dialogue. C'est aussi l'élément sur lequel le widget est instancié.
    • ui-dialog-buttonpane: Le panneau contenant les boutons de la boîte de dialogue. Ce panneau n'est affiché que lorsque l'buttonsoption est définie.
      • ui-dialog-buttonset: Le conteneur autour des boutons.

De plus, lorsque l'modaloption est définie, un élément avec leui-widget-overlaynom de classe est ajouté à<body>。

Dépendances

Notes supplémentaires

  • Ce widget nécessite du CSS fonctionnel, sinon il ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS spécifique au widget comme point de départ.

Exemples

Une simple boîte de dialogue jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>对话框部件（Dialog Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

Autres extensions