easyUi：其他插件的使用

qq_35119207

已于 2022-09-16 13:49:32 修改

阅读量413

点赞数

分类专栏： easyUI 文章标签： easyui 前端 javascript

于 2022-09-16 13:48:34 首次发布

本文链接：https://blog.csdn.net/qq_35119207/article/details/126888943

版权

2、面板 Panel

使用面板，有2种使用方式

方式1、基于html标签+类名（easyui-样式名）  这里为  <div class='easyui-panel'></div>
方式2、使用js代码，来实现
	$("要操作的标签，这里是jquery").插件方法();  这里为 $("div").panel();

面板的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9eNP91QZ-1663306942956)(图片/image-20210718213642840.png)]

注意事项：

1.面板一般是放在div标签中，来实现的

案例演示

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo2</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!--
        写法1：通过html+ data-options属性的方式，来实现
        面板常用的属性：
        title：面板的标题
        iconCls:面板标题左边的图标
     -->
<div class="easyui-panel" data-options="title:'我是标题',iconCls:'icon-man'">这是一个面板</div>

<!-- 
  写法2、通过js代码，来实现panel
 -->
<div id="p1">这个第二个panel</div>

<!-- 自定义一个按钮 -->
<div id="tt">
    <a href="#" class="easyui-linkbutton"  data-options="iconCls:'icon-man',size:'small',width:'20',height:'20'"></a>
</div>
</body>
<script>
    // 写法2：通过js代码，生成一个panel插件
  $("#p1").panel({
     
    title:'我是标题',  //标题
    iconCls:'icon-man', //图标
    width:400,  //panel的宽度
    height:600,   //panel的高度
    collapsible:true, //添加 可折叠按钮
    maximizable:true, //添加 放大按钮
    closable:true , ///添加 关闭按钮
    tools:'#tt', //绑定按钮组  作用：给面板中，添加自定义的按钮,这里写的是自定义按钮的id
    href:'qiantao.html/'  //href:用于引用其他页面的内容------注意这里写的是，目标页面，完整的url路径
  });
</script>
</html>

qiantao.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>panel 窗口中，要显示的页面</title>
</head>
<body>
    <table border="1" align="center">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机号</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>18</td>
            <td>1</td>
            <td>135464646</td>
            <td>xx</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>18</td>
            <td>1</td>
            <td>135464646</td>
            <td>xx</td>
        </tr>
    </table>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUQObcBX-1663306942958)(图片/image-20210719171437471.png)]

3、窗口 window

存放的标签为：div

样式名：easyui-window

插件方法名：window()

注意：

1、easyUI中的window，它继承了panel,因此panel 中所有的属性、方法、事件， window都可以直接拿来使用

案例演示

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyUi---Demo3--window</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!-- 3、使用js的方式，来使用window窗口 -->
 <div>
     <div id="d1">长时代峻峰散列计算长时代峻峰散列计算长时代峻峰散列计算长时代峻峰散列计算</div>
 </div>

 <!-- 4.1、定义一个按钮组 -->
 <div id="tt1">
     <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a>
     <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"></a>
</div>
</body>
<script>
    // 4、window常用的一些属性
  $("#d1").window({
     
      title:'新闻',
      widht:400,
      height:200,
      iconCls:'icon-man',
      url:''  ,//引用其他页面----这些都是panel中存在的，window可以直接拿来使用
      modal:true, //灯罩效果-----除了本窗口，其他都变灰色了，并且不能够点击
      draggable:false,// 表示窗口，是否可拖拽【默认为true，表示可拖拽】----false:表示，不可以拖拽
      tools:'#tt1'
  });
</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6Y9Equh-1663306942959)(图片/image-20210718223554714.png)]

4、对话框 dialog

存放的标签为：div

样式名：easyui-dialog

插件方法名：dialog()

案例演示

dialog的常用属性，并使用dialog画了一个登录页面

注意：legend标签，是给form表单，添加一个文字说明------------------------挺好看的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>

<!-- 定义一个按钮组 -->
 <div id="tt1">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"></a>
</div>
<!-- 定义一个底部按钮组 -->
<div id="tt2">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man'">登录</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
</div>
<!-- 登录表单 -->
<!-- 1、先定义一个dialog,使用js的方式 id="dl"-->
<div id="dl">
     <form action="#">
         <fieldset>
             <legend>登录</legend>
             <!--  align="center" 让表格中的内容进行居中 -->
             <table align="center">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" name="password" id="password"></td>
                </tr>
            </table>
         </fieldset>
         
     </form>

</div>
</body>
<script>
    //注意：对话框继承了 window和linkbutton，因此他们的属性、方法、事件  它都可以直接用
    $("#dl").dialog({
     
        title:'用户登录', //标题
        width:400, //宽度
       // height:200, //高度  不写，默认高度就是自适应
        iconCls:'icon-man', //图标
        modal:true, //灯罩效果-----除了本窗口，其他都变灰色了，并且不能够点击
        //tools:'#tt1',  //引用按钮组----自定义工具菜单
        toolbar:'#tt1',// dialog对话框：特有的属性-------在对话框的上部，绑定一个按钮组【它是在窗口内部进行显示，更符合常理】
        buttons:'#tt2',//在dialog对话框底部，绑定一个按钮组

    })
</script>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cnfaYTyH-1663306942960)(图片/image-20210719214813953.png)]

5、消息框 messager 【常用】

核心：继承window、linkbutton的所有属性

应用：用户操作完毕之后的提示

使用方式：
            消息框
                    $.message.show({
   
                     属性名:值,
                     属性名:值,
                     ....
                    })


            提示框
                    $.message.alert({
   
                     属性名:值,
                     属性名:值,
                     ....
                    })


            确认框
                    $.message.confirm({
   
                     属性名:值,
                     属性名:值,
                     ....
                    })

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo4----dialog</title>
    <!-- 1、引入easyUI的css样式 -->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!-- 2、引入js :jquery、easyui【注意：引入的顺序，必须先引入jquery，后引入easyUI】 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/easyui-lang-zh_CN.js"></script>
   
</head>
<body>
    <!-- 消息框：它是一个动画效果，会自动的显示，并隐藏 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',onClick:test1">测试消息框</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',onClick:test2">测试提示框</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man',onClick:test3">测试确认框</a>

</body>
<script>
// 显示 消息框
function test1(){
   
    $.messager.show({
   
        title:'操作提示', //message:设置标题
        showSpeed:1000,  //设置消息框，显示的时间【几毫秒内，就显示出 消息框】
        timeout:3000,//显示后，停留时间---3000表示停留3秒
        showType:'fade',//设置 消息框 消失的过渡效果 【默认是slide效果】
        msg:'您的余额不足' //设置消息框中的，提示信息
    });
}
//显示 提示框【也叫“警告框”】
function test2(){
   
    $.messager.alert({
   
       
        msg:'您的余额不足', //设置提示框中的，提示信息
        title:'标题', //设置提示框中的标题
        icon:'error', //提示框中的图标  具体的取值，看文档
        fn:function(){
   
            //点击提示框中的 确定  按钮 之后，才会  调用该函数
            console.log("窗口关闭了")
        }
    });
}
//显示 确认框
function test3(){
   
    $