视频课:https://edu.csdn.net/course/play/7621
本案例主要针对EasyUI常用的panel,window,dialog做了下简要的讲解,没有把window的图上传,敬请大家自己敲下代码实现,比较简单,主要内容针对基金系统作了下应用。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP '018_window.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" /> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ //利用渲染,来初始化组件; $('#mypanel').panel({ title:'金融产品介绍', width:300, height:300, iconCls:true, collapsible:true, closable:true, content:[{text:'a'},{text:'b'}] }); }); /*$(function(){ $('#mywin').window({ content:'购买基金成功!', onOpen:function(){ //$.messager.alert('message','success'); } }); }); $(function(){ $('#buyfund').click(function(){ $('#mywin').window('open'); }); });*/ /* $(function(){ $('#fundinfo').dialog({ title:'个人基金信息修改', iconCls:'icon-ok', toolbar:[{ text:'申购', iconCls:'icon-add', handler:function(){ $.messager.alert('提示信息','为您打开基金申购'); } },{ text:'赎回', iconCls:'icon-edit' }], buttons:[ { text:'确定', iconCls:'icon-redo', handler:function(){ $.messager.alert('提示信息','基金申购成功'); } },{ text:'取消', iconCls:'icon-undo', handler:function(){ $.messager.alert('提示信息','基金操作取消'); } } ] }); });*/ </script></head><body><h2>可以使用两种方式来创建布局,html或js</h2><div id="mypanel" class="easyui-panel" style="width:300px;height:300px" title="我的面板" iconCls="icon-add" minimizable="true" maximizable="true" closable="true" collapsible="true"> </div>-<!-- <div id="mypanel" title="产品2">债券基金</div><div id="mywin" class="easyui-window" closed=true title="购买基金" style="width: 400px;height:300px;" draggable=false resizable=false></div> <a id="buyfund" class="easyui-linkbutton">测试链接按钮</a><div id="fundinfo" class="easyui-dialog" style="width:400px;height: 300px"></div>--></body></html>
效果图如下: