SSM项目学习1：EasyUI组件的使用

最新推荐文章于 2020-06-18 15:19:58 发布

weixin_42430635

最新推荐文章于 2020-06-18 15:19:58 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/weixin_42430635/article/details/102793623

版权

第一个EasyUI

1，引库

<head>
    <title>$Title$</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/uimaker/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/easyui-lang-zh_CN.js"></script>
  </head>

2，编写的两种形式

方式1:使用css样式

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接</a>

方式2:使用js形式

<a href="#" id="btn">超链接</a>
定义script
	<script type="text/javascript">
    $(function(){
        $("#btn").linkbutton({
            "iconCls":"icon-search"
        });
    });
</script>

Panel组件

简介

面板作为承载其它内容的容器。这是构建其他组件的基础
（比如：layout,tabs,accordion等）。
它还提供了折叠、关闭、最大化、最小化和自定义行为。
面板可以很容易地嵌入到web页面的任何位置。

JS形式及属性介绍

<div id="myPanel"></div>

定义js

<script>
$(function () {
  $("#btn").linkbutton({
    iconCls:'icon-search'
  });
  $("#myPanel").panel({//以下全是属性
    title:'我的面板',
    width:300,
    height:300,
    content:'lalala',
    iconCls:'icon-save',
    collapsible:true,
    closable:true,
    maxmizable:true,
     href:'myxq.html', //从URL读取远程数据并且显示到面板
    loadingMessage:'正在努力加载中'
  });
})

Panel事件与方法

事件:直接在属性下方添加事件名称和对应的回调

在这里插入图片描述

方法:通过方法可以设置panel的一些属性
在这里插入图片描述

Window组件

概述

扩展自 $. f n . p a n e l . d e f a u l t s 。使用$ .fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口
默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

使用

<div id="win"></div>

在这里插入图片描述

行为

$('#win').window('open');  // 打开窗口
$('#win').window('close');  // 关闭窗口

另外

对于window窗口还可以自定义工具栏

<div id="tt">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>

在这里插入图片描述

dialog组件

概述

扩展自$.fn.window.defaults
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。
对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具

使用

<body>
	<div id="dialog">对话框</div>
</body>
<script>
        $(function () {
           $("#dialog").dialog({
               width:300,
               height:300,
               title:'dialog',
               modal:true,/*定义背后是否有遮罩*/
               toolbar:[
                   {
                       text:'保存',
                       iconCls:'icon-save',
                       handler:function(){alert('add333')}
                   },{
                       iconCls:'icon-edit',
                       handler:function(){alert('edit333')}
                   }],
               buttons:[{
                   text:'保存',
                   handler:function(){alert('保存')}
               },{
                   text:'关闭',
                   handler:function() {
                       $('#dialog').dialog('close');
                   }
               }]

           }) ;
        });

在这里插入图片描述

tabs组件

概述

选项卡显示一批面板。
但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮

使用

使用css
	
		<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
		    <div title="Tab1" >tab1</div>
		    <div title="Tab2" data-options="closable:true">tab2</div>
		    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">tab3</div>
		</div>
使用js
	
		$("#myTabs").tabs({
             width:500,
                height:500,
                plain:false,
                fit:false,/*设置为true时，选项卡的大小将铺满它所在的容器。*/
                border:true,/*设置为true时，显示选项卡容器边框。*/
                tabPosition:'top',/*toolPosition*/
                headerWidth:50, /*headerWidth 选项卡标题宽度，为'left'或'right'有效*/
                tools:[{ /*工具栏添加在选项卡面板头的左侧或右侧*/
                    iconCls:'icon-add',
                    handler:function(){
                        alert('添加')
                    }
                },{
                    iconCls:'icon-remove',
                    handler:function(){
                        alert('保存')
                    }
                }]
            })

添加与删除标签

	添加
		 $("#myTabs").tabs("add",{
		                            title:'选项卡'+i,
		                            selected:true,
		                            closable:true,
		                            content:"选项卡内容"+i++
		                        })
	删除
		handler:function(){
		                        /*1.获取选中的选项卡*/
		                        var tab = $("#myTabs").tabs("getSelected");
		                        /*2.获取选项卡的索引*/
		                        var index = $("#myTabs").tabs("getTabIndex",tab);
		                        /*3.关闭选项卡*/
		                        $("#myTabs").tabs("close",index);
		
		                    }