Tutoriel sur l'utilisation de la boîte de dialogue à l'aide de jQuery UI

Je suis un peu paresseux, donc les tutoriels sur jquery ui n'ont jamais été mis à jour Je suis désolé. Démarrer avec jquery ui explique brièvement les concepts, les utilisations et. caractéristiques générales de jquery ui À partir de cet article, nous commencerons à expliquer l'utilisation de certains composants spécifiques dans jquery ui. Cet article explique l'utilisation de la boîte de dialogue jquery ui :

Nous utilisons souvent des boîtes de dialogue lors de l'interaction. Oui, jquery ui dialog est né pour cela nous fournit une interface

simple à implémenter normalement. Elle nécessite beaucoup de javascript<.> code pour obtenir l'effet. Nous pouvons utiliser la boîte de dialogue jquery ui pour implémenter de nombreuses fonctions, telles que la connexion, l'enregistrement et les invites de message. Avant d'utiliser le composant de dialogue, vous devez d'abord introduire les fichiers js dont dépend la boîte de dialogue dans la page. Ces fichiers incluent des fichiers js et des fichiers css, et tous les exemples de codes de style de dialogue se trouvent dans /development-bundle/. démos Dans le répertoire /dialog/, ouvrez le code source et voyez comment utiliser un type de boîte de dialogue. Si vous ne comprenez pas de quoi je parle, allez simplement voir comment l'utiliser après avoir téléchargé jquery UI. Si vous n'avez pas encore le package de code jquery ui, vous devez d'abord le télécharger : téléchargement de jquery UI pour chaque version

Prenons /development-bundle/demos/dialog/default.html comme exemple pour regardez l'en-tête de la boîte de dialogue jquery ui Introduction des fichiers externes

Certains de ces fichiers importés ne sont pas nécessaires et doivent être déterminés en fonction des paramètres de la boîte de dialogue Par exemple, si vous n'en avez pas besoin. pour ajuster la taille de la boîte de dialogue, vous n'avez pas besoin de charger le fichier jquery.ui. redimensionnable.js, regardons comment la boîte de dialogue apparaît

<!--载入主题样式-->
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
<!--载入 jquery 核心类库-->
<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></script>
<!--这个主要是为了兼容 IE6 而载入的一个插件-->
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<!--载入 jquery ui 核心类库-->
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<!--载入 jquery ui 组件核心类库-->
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<!--载入 jquery ui 鼠标相关组件-->
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
<!--载入 jquery ui 拖动相关组件，主要是为了让 dialog 能够被拖动-->
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<!--载入 jquery ui 位置相关组件，主要是为了让 dialog 能够居中或者控制位置-->
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
<!--载入 jquery ui 调整大小相关组件，主要是为了让 dialog 的大小能够通过鼠标来调整-->
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
<!--载入 jquery ui 对话框组件-->

Oui, l'utilisation de la boîte de dialogue. est si simple. Bien sûr, le dialogue a également de nombreux paramètres pour vous aider à implémenter de nombreuses fonctions complexes, nous vous l'expliquerons plus tard, l'utilisation de ces paramètres est fondamentalement très simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!