EasyUI的组件使用

[1] easyui-panel 面板

作用:

在网页中显示一个面板效果，可以在面板中显示网页中的数据

使用:

① 在jsp页面中引入EasyUI的资源

② 在页面创建一个div标签，并设置其class属性，属性值为‘easyui-panel’

③ 在div标签上使用属性data-options设置面板的初始化效果，设置组件的属性和事件，以键值对的形式设置，不同的键值对使用逗号隔开。

④ 可以使用jquery来调用组件提供的方法，根据用户在网页中的行为动作对组件作出对应的操作。

使用的效果示例代码:

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath %>"/>
    <title>Title</title>
    <%--引入easyUI的资源--%>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="themes/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <%--声明js代码域--%>
    <script type="text/javascript">
        function test(){
            $("#my").panel('setTitle','设置标题');
        }
    </script>
</head>
<body>
<input type="button" value="测试组件方法的使用" onclick="test()">
    <%--1.通过标签创建panel组件--%>
    <div style="width: 350px;height: 350px;border: solid 1px;">
        <div id="my" class="easyui-panel"
             data-options="title:'我是面板',iconCls:'icon-edit',left:200,top:300,fit:true,content:'我是面板主体',collapsible:true
                            ,maximizable:true,onMaximize:function(){
                            alert('aa')
                        }"
             style="width: 300px;height: 300px;">
        </div>
    </div>
</body>
</html>

posted @ 2021-01-25 15:45 巧克力曲奇阅读(133) 评论(0) 编辑收藏举报

刷新页面返回顶部

巧克力曲奇

EasyUI的组件使用

[1] easyui-panel 面板

公告