jqueryui的对话框控件的基本使用

最新推荐文章于 2023-04-10 08:53:48 发布

xiao____ming

最新推荐文章于 2023-04-10 08:53:48 发布

阅读量136

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/xiao____ming/article/details/107153717

版权

本文详细介绍了如何在JavaScript应用中使用jQueryUI的对话框控件，从基本引入到复杂配置，涵盖创建、设置选项、事件监听等多个方面，助你轻松实现交互式弹窗功能。

摘要由CSDN通过智能技术生成

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/7/6
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jqueryui的对话框控件使用</title>
    <%--jqueryui需导入以下三个文件--%>
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="../js/jquery-ui-1.12.1/jquery-ui.css">
    <script type="text/javascript">
        $(function () {
            //1.给对话框添加确定和取消按钮
            var params = {buttons : [
                            {text:'确定',click:function () {
                                    console.log('确定');
                                    $('#dialog').dialog('close');
                                    //在这里就可以继续添加处理这个jsp的servlet路径
                                }},
                            {text:'取消',click:function () {
                                    console.log('取消');
                                    $('#dialog').dialog('close');
                                }}
                    ]};
            //2.给div绑定对话框并关闭（没有这两步div中的文本，即对话框中的内容会直接显示在网页中）
            $('#dialog').dialog(params);
            $('#dialog').dialog('close');
            //3.通过按钮的绑定事件来调出对话框
            $('#btn').click(function () {
                $('#dialog').dialog(params);
            });
        });
    </script>
</head>
<body>
<div id="dialog" title="对话框测试">
    <p>这是一个提示对话框</p>
</div>
<button id="btn">点击</button>
</body>
</html>