EasyUI 基础组件

视频课: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>

效果图如下:

EasyUI 基础组件


EasyUI 基础组件


上一篇:提示框


下一篇:十分钟快速入门 Pandas