Heim >Web-Frontend >CSS-Tutorial >Wie entferne ich die Schaltfläche „Schließen' in einem jQuery-UI-Dialogfeld mithilfe von CSS?
Wie entferne ich die Schaltfläche „Schließen' in einem jQuery-UI-Dialogfeld mithilfe von CSS?
- PHPznach vorne
- 2023-09-17 10:01:021587Durchsuche
Das Anzeigen von Daten in sortierter Reihenfolge auf HTML-Webseiten ist eine mühsame Aufgabe. Dialogfelder werden verwendet, um Informationen in einer darstellbaren Form auf einer Webseite anzuzeigen. Ein Dialogfeld ist ein schwebendes Fenster, das einen Titel und Inhalt enthält. Mit der jQuery-Benutzeroberfläche können Entwickler einfache und benutzerfreundliche Dialogfelder für Websites erstellen. In diesem Artikel besprechen wir, wie Sie jQuery-UI-Dialogfelder erstellen und wie Sie die Schaltfläche „Schließen“ in diesen Feldern entfernen.
Lassen Sie uns zunächst das Dialogfeld der jQuery-Benutzeroberfläche verstehen.
jQuery-UI-Dialog
Mit der MethodejQuery Dialog() können Entwickler ein einfaches Dialogfenster im Ansichtsfenster erstellen, das vom Seiteninhalt nicht beeinflusst wird. dialog() Methode wird verwendet, um dem Browser mitzuteilen, dass jedes HTML-Element in Form eines Dialogfelds angezeigt werden kann. Es besteht aus einer Titelleiste und einem Inhaltsbereich. Standardmäßig kann es über die Schließen-Schaltfläche (x) verschoben, in der Größe geändert und gelöscht werden.
Grammatik
$(selector, context).dialog (options);
Parameter
Titel− Es ermöglicht Entwicklern, den im Dialogfeld angezeigten Titel zu bestimmen.
Breite – Damit können Entwickler die Breite des Dialogfelds festlegen.
Position – Es ermöglicht Entwicklern, die Anfangsposition des Dialogs festzulegen.
Höhe – Entwickler können die Höhe des Dialogfelds festlegen.
Button – Wird zum Hinzufügen von Schaltflächen zu Dialogfeldern verwendet.
Max-height – Bestimmen Sie die maximale Höhe des Dialogfelds
Max-width – Bestimmen Sie die maximale Breite des Dialogfelds
Mindesthöhe – Bestimmen Sie die Mindesthöhe des Dialogfelds
Mindestbreite – Bestimmen Sie die Mindestbreite des Dialogfelds
Appendto – Wenn diese Option auf „false“ gesetzt ist, können wir verhindern, dass die UIdraggable-Klasse zur Liste der HTML-DOM-Elemente hinzugefügt wird.
Automatisch öffnen – Wenn diese Option aktiviert bleibt, wird das Dialogfeld geöffnet, sobald es erstellt wird. Bei „false“ wird beim Aufruf ein Dialogfeld geöffnet.
Schritte, die Sie befolgen müssen
Hier sind die Schritte, die Sie befolgen sollten, um ein JQuery-Dialogfeld zu erstellen.
Schritt 1 – Fügen Sie jQuery und jQuery UI CDN zum Code im <script>-Tag hinzu. Stattdessen können Sie sie auf Ihr lokales System herunterladen. </script>
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script> <script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
Schritt 2 – Erstellen Sie ein beliebiges HTML-Element, das als Dialog dienen soll (wie div, p usw.) und legen Sie seine ID fest. Erstellen Sie nun einen Dialog mit der Methode jQuery UIdialog().
Schritt 3 – Erstellen Sie eine Schaltfläche, die beim Klicken den Dialog anzeigt. Schreiben Sie eine Funktion, um ein Dialogfeld zu öffnen, wenn Sie innerhalb des <script>-Tags darauf klicken. Stellen Sie <b><i>autoopen: false ein, damit der Dialog geöffnet wird, wenn auf die Schaltfläche geklickt wird. </script>
Schritt 4 – Gestalten Sie die Schaltflächen und Dialogfelder mit CSS.
Beispiel
Das folgende Beispiel zeigt, wie man ein einfaches jQuery-UI-Dialogfeld erstellt.
<!DOCTYPE html>
<html>
<head>
<title> jQuery UI Dialog Box </title>
<link href= "http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<style>
.ui-widget-header,.ui-state-default, ui-button{
background: green;
border: 3px solid black;
color: white;
font-weight: 900;
letter-spacing: 1px;
font-family: helvetica;
}
#button{
position: absolute;
left: 40%;
margin: 12px;
padding: 12px;
border: 2px solid black;
font-weight: bold;
letter-spacing: 1.5px;
}
</style>
<script>
$(function() {
$("#demo").dialog({
autoOpen: false,
});
$("#button").click(function() {
$("#demo").dialog( "open" );
});
});
</script>
</head>
<body>
<div id= "demo" title= "Tutorialspoint"> An e-learning platform for Computer Science. </div>
<button id= "button"> Show Dialog Box </button>
</body>
</html>
Wie Sie sehen können, zeigen wir standardmäßig eine Schaltfläche zum Schließen im Dialog an. Wenn Sie als Nächstes die Schaltfläche „Schließen“ entfernen möchten, verwenden wir CSS.
Schließen-Schaltfläche aus dem jQuery-UI-Dialogfeld entfernen
Setzen Sie einfach den Anzeigeeigenschaftswert von ui-dialog-titlebar-close auf none, um die Schaltfläche „Schließen“ aus dem jQuery-UI-Dialog zu entfernen.
Grammatik
.ui-dialog-titlebar-close {
display: none;
}
Schritte, die Sie befolgen müssen
Hier sind die Schritte, die Sie befolgen müssen
Schritt 1 – Fügen Sie jQuery und jQuery UI CDN zum Code im <script>-Tag hinzu. Stattdessen können Sie sie auf Ihr lokales System herunterladen. </script>
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script> <script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
Schritt 2 – Erstellen Sie ein beliebiges HTML-Element, das als Dialog dienen soll (wie div, p usw.) und legen Sie seine ID fest. Erstellen Sie nun einen Dialog mit der jQuery-Methode UIdialog().
Schritt 3 – Erstellen Sie eine Schaltfläche, die beim Klicken den Dialog anzeigt. Schreiben Sie eine Funktion, um ein Dialogfeld zu öffnen, wenn Sie innerhalb des <script>-Tags darauf klicken. </script>
Schritt 4 – Gestalten Sie Schaltflächen und Dialogfelder mit CSS. Verwenden Sie den Klassenselektor „.ui-dialogtitlebar-close“ und setzen Sie seine Anzeigeeigenschaft auf „none“.
Beispiel
Das folgende Beispiel zeigt, wie Sie die Schaltfläche „Schließen“ aus einem jQuery-UI-Dialog entfernen.
<!DOCTYPE html>
<html>
<head>
<title> jQuery UI Dialog Box </title>
<link href= "http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<style>
.ui-widget-header,.ui-state-default, ui-button{
background: green;
border: 3px solid black;
color: white;
font-weight: 900;
letter-spacing: 1px;
font-family: helvetica;
}
#button{
position: absolute;
left: 40%;
margin: 12px;
padding: 12px;
border: 2px solid black;
font-weight: 900;
letter-spacing: 1.5px;
}
.ui-dialog-titlebar-close {
display: none;
}
</style>
<script>
$(function() {
$("#demo").dialog({
autoOpen: false,
});
$("#button").click(function() {
$("#demo").dialog( "open" );
});
});
</script>
</head>
<body>
<div id= "demo" title= "Tutorialspoint"> An e-learning platform for Computer Science. </div>
<button id= "button"> Show Dialog Box </button>
</body>
</html>
Fazit
Dialogfelder sind kleine grafische Fenster, die die Benutzerinteraktion erleichtern. Es ermöglicht Entwicklern, mit Benutzern zu kommunizieren und deren Antworten zu erhalten. Es gibt verschiedene Möglichkeiten, solche Dialogfelder zu erstellen. In diesem Artikel erstellen wir einen Dialog mithilfe der jQuery-Benutzeroberfläche. Darüber hinaus haben wir auch Möglichkeiten besprochen, die Schaltfläche „Schließen“ (standardmäßig angezeigt) aus den Dialogfeldern der jQuery-Benutzeroberfläche zu entfernen.
Das obige ist der detaillierte Inhalt vonWie entferne ich die Schaltfläche „Schließen' in einem jQuery-UI-Dialogfeld mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!