jqueryモバイルダイアログボックスの使い方-フロントエンドQ&A-php.cn

jqueryモバイルダイアログボックスの使い方

WBOY

リリース： 2023-05-14 09:24:37

オリジナル

510 人が閲覧しました

jQuery モバイルダイアログボックスは、Web ページで一般的に使用されるユーザー対話ツールの 1 つです。モバイル端末でダイアログボックスを使用すると、ユーザーエクスペリエンスが向上し、ユーザーの操作と情報交換が容易になります。以下は、jquery mobile ダイアログボックスの使用方法です。

jQuery ライブラリとダイアログプラグインの導入

jQuery ライブラリとダイアログプラグインをプロジェクトに導入します。jQuery ライブラリは公式 Web サイトからダウンロードできます。、ダイアログプラグインは GitHub Obtain で見つけることができます。導入方法は次のとおりです。

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

ログイン後にコピー

基本的な HTML 構造の作成

ダイアログのタイトル、コンテンツ、ボタン、その他の要素を含む基本的な HTML 構造を作成します。箱。一般的なダイアログボックスの構造は次のとおりです。

<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>

ログイン後にコピー

ダイアログボックスイベントの登録

jQuery を使用して、ダイアログボックスの開始イベントと終了イベントを含むダイアログボックスイベントを登録します。。一般的なダイアログボックスイベントは次のとおりです。

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

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

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

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

ログイン後にコピー

ダイアログボックススタイルのカスタマイズ

CSS スタイルを使用して、幅、高さ、フォント、色などのダイアログボックスをカスタマイズします。ダイアログボックスや枠線など一般的なダイアログスタイルは次のとおりです:

/*对话框样式*/
.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;
}

ログイン後にコピー

完全なコード例

<!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>

ログイン後にコピー

上記は、jquery モバイルダイアログボックスの使用方法です。簡単な手順とコード例を通じて、プロジェクト内でダイアログプラグインをすばやく使用して、ユーザーエクスペリエンスを向上させ、Web サイトの品質を向上させることができます。

以上がjqueryモバイルダイアログボックスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。