[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=" 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=" 300px;height: 300px;"> </div> </div> </body> </html>