EasyUI最简单的插件(弹出框)入门

偏执的太偏执、 2022-02-17 08:47 272阅读 0赞

## pre - 依赖文件的下载和引入 ##

下载 [jquery-easyui-1.7.0.zip][]，若失效则进[官网][Link 1]下载。  
解压zip，以下为基本的依赖(本地 相对路径)

<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/icon.css">
    
    <script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>

## html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>messager</title>
        
        <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/icon.css">
        
        <script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="./jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
    </head>
    <body>
        <script>
            // messager的show方法。
            // $.messager.show({
            //     title:'My Title',
            //     msg:'Message will be closed after 5 seconds.',
            //     timeout:5000,
            //     showType:'slide'
            // });
            // $.messager.show({
            //     title:'My Title',
            //     msg:'Message will be closed after 4 seconds.',
            //     showType:'show',
            //     style:{
            //         right:'',
            //         top:document.body.scrollTop+document.documentElement.scrollTop,
            //         bottom:''
            //     }
            // });
    
    
            
            // messager的4种弹出框
            // alert, confirm, prompt, pregress
            // 警告，  确认，   提示,   进度
    
            // $.messager.alert(title, msg, icon, fn);
            // icon可为: info, warning, error, question
            
            // alert
            // 两种方法传入参数，挨个传入|传入对象(名值对)
            // $.messager.alert("标题", "警告消息", "info", function() {alert("警告完毕");})
            // 推荐以对象格式传入数据，对象的属性名要严格对应(文档|源码中查找)。
            $.messager.alert({
                title: "标题",
                msg: "消息",
                icon: "info"
            });
    
            // confirm
            // $.messager.confirm({
            //     title: "标题",
            //     msg: "消息",
            //     fn: function() {
            //         alert("提示完毕");
            //     }
            // });
    
            // prompt
            // $.messager.prompt({
            //     title: "标题",
            //     msg: "消息",
            //     fn: function(val) {
            //         alert(`您输入的参数是 ${val}`);
            //     }
            // });
            
            // progress
            // $.messager.progress();
            // $.messager.progress({
            //     title: "标题",
            //     msg: "消息",
            //     text: "文本",
            //     interval: 200
            // });
            // setInterval(function() {
            //     $.messager.progress("close");   // 关闭进度条(3秒后)
            // }, 3000);
            
        </script>
    </body>
    </html>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_20_color_000000_t_70]

[jquery-easyui-1.7.0.zip]: http://59.80.44.45/www.jeasyui.com/download/downloads/jquery-easyui-1.7.0.zip
[Link 1]: https://jqueryui.com/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_20_color_000000_t_70]: /images/20220217/a06faeba8c1f468ca563603b30e64e15.png