Maison > Article > interface Web > Comment utiliser la boîte de dialogue mobile jquery

Comment utiliser la boîte de dialogue mobile jquery

WBOYoriginal: 2023-05-14 09:24:37430parcourir

La boîte de dialogue mobile jQuery est l'un des outils d'interaction utilisateur couramment utilisés dans les pages Web. L'utilisation de boîtes de dialogue sur le terminal mobile peut améliorer l'expérience utilisateur et faciliter les opérations utilisateur et l'échange d'informations. Voici comment utiliser la boîte de dialogue mobile jquery.

Introduire la bibliothèque jQuery et le plug-in de dialogue

Introduire la bibliothèque jQuery et le plug-in de dialogue dans le projet La bibliothèque jQuery peut être téléchargée à partir du site officiel et le plug-in de dialogue peut être obtenu sur GitHub. La méthode d'introduction est la suivante :

<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="path/to/dialog.js"></script>
</head>

Créer la structure HTML de base

Créer la structure HTML de base, comprenant des éléments tels que le titre, le contenu et les boutons de la boîte de dialogue. La structure courante des boîtes de dialogue est la suivante :

<div class="dialog">
    <div class="dialog-title">对话框标题</div>
    <div class="dialog-content">对话框内容</div>
    <div class="dialog-btn">
        <button class="dialog-confirm">确认</button>
        <button class="dialog-cancel">取消</button>
    </div>
</div>

Enregistrer les événements de la boîte de dialogue

Utilisez jQuery pour enregistrer les événements de la boîte de dialogue, y compris les événements d'ouverture et de fermeture de la boîte de dialogue. Les événements courants de la boîte de dialogue sont les suivants :

//显示对话框
$(".dialog").dialog("show");

//隐藏对话框
$(".dialog").dialog("hide");

//确认按钮点击事件
$(".dialog-confirm").on("click", function() {
    //执行确认操作
});

//取消按钮点击事件
$(".dialog-cancel").on("click", function() {
    //执行取消操作
});

Style de boîte de dialogue personnalisé

Utilisez les styles CSS pour personnaliser la boîte de dialogue, y compris la largeur, la hauteur, la police, la couleur et la bordure de la boîte de dialogue, etc. Les styles de dialogue courants sont les suivants :

/*对话框样式*/
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #999;
    z-index: 9999;
}

/*对话框标题样式*/
.dialog-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 10px 15px;
    border-bottom: 1px solid #eaeaea;
}

/*对话框内容样式*/
.dialog-content {
    padding: 15px;
    font-size: 14px;
    color: #666;
}

/*对话框按钮样式*/
.dialog-btn {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #eaeaea;
}

/*确认按钮样式*/
.dialog-confirm {
    display: inline-block;
    width: 120px;
    height: 36px;
    line-height: 36px;
    background-color: #2d8cf0;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
}

/*取消按钮样式*/
.dialog-cancel {
    display: inline-block;
    width: 120px;
    height: 36px;
    line-height: 36px;
    background-color: #eaeaea;
    color: #333;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

Exemple de code complet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery移动端对话框使用方法</title>
    <style>
        /*对话框样式*/
        .dialog {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #999;
            z-index: 9999;
        }

        /*对话框标题样式*/
        .dialog-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            padding: 10px 15px;
            border-bottom: 1px solid #eaeaea;
        }

        /*对话框内容样式*/
        .dialog-content {
            padding: 15px;
            font-size: 14px;
            color: #666;
        }

        /*对话框按钮样式*/
        .dialog-btn {
            text-align: center;
            padding: 10px 0;
            border-top: 1px solid #eaeaea;
        }

        /*确认按钮样式*/
        .dialog-confirm {
            display: inline-block;
            width: 120px;
            height: 36px;
            line-height: 36px;
            background-color: #2d8cf0;
            color: #fff;
            font-size: 14px;
            border-radius: 5px;
            margin-right: 10px;
            cursor: pointer;
        }

        /*取消按钮样式*/
        .dialog-cancel {
            display: inline-block;
            width: 120px;
            height: 36px;
            line-height: 36px;
            background-color: #eaeaea;
            color: #333;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="dialog" style="display: none">
        <div class="dialog-title">对话框标题</div>
        <div class="dialog-content">对话框内容</div>
        <div class="dialog-btn">
            <button class="dialog-confirm">确认</button>
            <button class="dialog-cancel">取消</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="path/to/dialog.js"></script>
    <script>
        $(function() {
            //显示对话框
            $(".dialog").dialog("show");

            //隐藏对话框
            $(".dialog").dialog("hide");

            //确认按钮点击事件
            $(".dialog-confirm").on("click", function() {
                //执行确认操作
            });

            //取消按钮点击事件
            $(".dialog-cancel").on("click", function() {
                //执行取消操作
            });
        });
    </script>
</body>
</html>

Ce qui précède explique comment utiliser la boîte de dialogue mobile jquery Grâce à des étapes simples et des exemples de code, vous pouvez rapidement utiliser le plug-in de dialogue dans votre projet pour. améliorer l'expérience des utilisateurs et améliorer la qualité du site Web.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Nodejs ne peut pas être installé 2502Article suivant：Nodejs ne peut pas être installé 2502

Articles Liés

Voir plus