視頻課：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>效果圖如下：
