<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript"> $(function(){ $("#panel1").panel({ title : "pannel",//设置面板标题 width : 150, height : 150, id : "pan", iconCls :"icon-add",//设置面板图标 left : 100, top : 500, style :{ 'min-height' : '150px', 'background-color' : 'red', },//添加样式到面板 fit : false,//设置面板是否自适应 父容器 cls :"",//添加一个css类ID到面板 headerCls :"",//添加一个css类ID到面板头部 bodyCls :"",//添加一个css类ID到面板正文 border : true,//是否显示 边框 closable : true,//设置是否可关闭面板 content : "这是一个面板",//面板主体内容 collapsible : true,//设置面板是否可折叠 minimizable : true,//设置面板是否可最小化 maximizable : true,//设置面板是否可最大化 collapsed : false,//设置初始化时是否折叠面板 minimized : false,//设置初始化时是否最小化面板 maximized : false,//设置初始化时是否最大化面板 closed : false,//设置初始化时是否关闭面板 href : null,//从url中读取显示数据到面板 cache : false, //是否缓存面板内容 loadingMessage :"正在加载，请稍等", extractor : null, //参数是函数 定义如何从ajax中获取数据 onBeforeLoad : function(){ console.log("在加载远程数据之前调用"); }, onLoad :function(){ console.log("在加载远程数据时调用"); }, onBeforeOpen : function(){ console.log("在打开面板之前调用"); }, onOpen : function(){ console.log("在打开面板之后调用"); }, onBeforeClose : function(){ console.log("在关闭面板之前调用"); }, onClose : function(){ console.log("在关闭面板之后调用"); }, onBeforeDestroy : function(){ console.log("在销毁面板之前调用"); }, onDestroy : function(){ console.log("在销毁面板之后调用"); }, onBeforeCollapse : function(){ console.log("在折叠面板之前调用"); }, onCollapse : function(){ console.log("在面板折叠之后调用"); }, onBeforeExpand : function(){ console.log("在面板展开之前调用"); }, onExpand : function(){ console.log("在面板展开之后"); }, onResize : function(width,height){ console.log("在面板大小改变之后触发"); }, onMove : function(left,top){ console.log("在面板移动之后触发"); }, onMaximize : function(){ console.log("在面板最大化后触发"); }, onMinimize : function(){ console.log("在面板最小化后触发"); } }); //获得该对象的pannel属性 //console.log($("#panel1").panel('option')); //返回面板对象 //console.log($("#panel1").panel("panel")); //返回面板头对象 //console.log($("#panel1").panel("header")); //返回面板的主体对象 //console.log($("#panel1").panel("body")); //修改面板的标题 //$("#panel1").panel("setTitle","修改后的标题"); //打开面板 [设置 为 true 时 ，跳过OnBeforeOpen回调函数] //$("#panel1").panel("open",true); //关闭面板[跳过onBeforeClose函数] //$("#panel1").panel("close",true); //刷新面板 //$("#panel1").panel("refresh"); //指定刷新内容并刷新 //$("#panel1").panel("refresh","http://***"); //修改面板的的大小和布局 //$("#panel1").panel("resize",{ // width : 100, // height : 100, // left : 100, // top : 100 //}); //设置移动的坐标 //$("#panel1").panel("move",{ // left : 100, // top : 100 //}); //设置面板最大化 //$("#panel1").panel("maximize"); //设置面板最小化 //$("#panel1").panel("minimize"); //设置面板恢复原状态 //$("#panel1").panel("restore"); //折叠面板 //$("#panel1").panel("collapse"); //展开面板 //$("#panel1").panel("expand"); }); </script> </head> <body> <div class="easyui-panel" data-options="closable:true" style=" 200px;height: 200px" title="panel"></div> <div id="panel1"></div> <a class="icon-add" onclick="javascript:alert('add')">按钮</a> <a class="icon-edit" onclick="javascript:void(0)">按钮</a> </body> </html>