jQuery Easy UI Panel(面板)组件

panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同，也是从设置一些面板属性、操作面板触发的事件、我们可针对面板对象的操作方法这三个点去学习。

后面有一些组件要依赖于这个组件。

另一点跟前面不同的就是面板内容能够请求远程数据。

演示样例：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {//属性列表$('#box').panel({id : 'box',               //面板的ID值 默觉得nulltitle : '我是一个面板', //面板显示的标题文本，默觉得nullwidth : 500,          //面板宽度 默觉得autoheight : 150,         //面板高度 默觉得autoiconCls : 'icon-add',   //面板左上角的一个图标,可去css样式中自己定义图标文件，默觉得null//left : 100,           //设置面板距离左边的距离 默觉得null//top : 100,           //设置面板距离上边的距离 默觉得nullcls : 'a',               //加入一个CSS 类ID 到面板。默觉得null。headerCls : 'b',        //參数为css类   定义面板头部样式 默认nullbodyCls : 'c',         //參数为css类   定义面板正文样式 默认null//面板样式style : {'min-height' : '200px',},//fit : true,            //默觉得false，含义是面板大小是否自适应父容器//border : false,      //默觉得true  定义是否显示面板边框//doSize : false,//noheader : true,        //默觉得false，当设置为true，在创建面板的时候不会创建标题content : '<strong>面板主体内容</strong>',      //面板主体内容 默觉得nullcollapsible : true,     //是否显示可折叠button     默觉得falseminimizable : true,     //是否显示最小化button 默认falsemaximizable : true,      //是否显示最大化button 默认falseclosable : true,     //是否定义关闭button      默认falsetools : '#tt',         //定义工具菜单，有两种方式，一种是以下那个数组方式，还有一种指向定义好的菜单/*tools : [{iconCls : 'icon-help',    //图标handler : function () { //点击触发函数alert('help');},},{}],*///collapsed : true,       //是否在初始化的时候折叠面板//minimized : true,      //是否在初始化的时候最小化面板//maximized : true,     //是否在初始化的时候最大化面板//closed : true,        //是否在初始化的时候关闭面板，这个属性什么时候能用到？//href : 'haicheng_demo/panel',         //远程请求数据（ajax请求，不能跨域）//loadingMessage : '正在努力载入中...',    //正在载入远程数据的时候，在面板内显示的信息,默认loading...//cache:false,           //假设为true，在超链接载入时缓存面板内容。默觉得true。/***对ajax远程请求回来的数据进行处理，然后return到面板上*extractor : function (data) { return data+"</br>--2014.08.18";}*///触发事件列表：/* onBeforeLoad : function () {alert('远程载入之前触发！');return false;                    //取消远程载入},onLoad : function () {alert('远程载入之后触发！');},onBeforeOpen : function () {alert('打开之前触发！');return false;                   //取消打开},onOpen : function () {alert('打开之后触发！');},onBeforeClose : function () {alert('关闭之前触发！');return false;                  //取消关闭},onClose : function () {alert('关闭之后触发！');},onBeforeDestroy : function () {alert('销毁之前触发！');//return false;                 //取消销毁},onDestroy : function () {alert('销毁之后触发！');},onBeforeCollapse : function () {alert('折叠之前触发！');//return false;                  //取消折叠},onCollapse : function () {alert('折叠之后触发！');},onBeforeExpand : function () {alert('展开之前触发！');//return false;                   //取消展开},onExpand : function () {alert('展开之后触发！');},onMaximize : function () {alert('窗体最大化时触发！');},onRestore : function () {alert('窗体还原时触发！');},onMinimize : function () {alert('窗体最小化时触发！');},onResize : function (width, height) {alert(width + '|' + height);},onMove : function (left, top) {alert(left + '|' + top);}*///onBeforeOpen : function () {// alert('打开之前触发！');//return false;                   //取消打开//},});//方法列表//$('#box').panel('panel').css('position', 'absolute');//$('#box').panel('destroy');/*$(document).click(function () {$('#box').panel('resize', {'width' : 600,'height' : 300,});});$(document).click(function () {$('#box').panel('move', {'left' : 600,'top' : 300,});});*///console.log($('#box').panel('options'));//console.log($('#box').panel('panel'));//console.log($('#box').panel('header'));//console.log($('#box').panel('body'));//$('#box').panel('setTitle', '标题');//$('#box').panel('open', true);//$('#box').panel('close');//$('#box').panel('destroy');//$('#box').panel('maximize');//$('#box').panel('restore');//$('#box').panel('minimize');//$('#box').panel('collapse');//$('#box').panel('expand');
});</script>
</head>
<body>
<!--<div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;"><p>内容区域</p></div>
-->
<div id="box"><p>内容区域</p>
</div><div id="tt"><a class="icon-add" οnclick="javascript:alert('add')">  </a><a class="icon-edit" οnclick="javascript:alert('edit')"> </a><a class="icon-cut" οnclick="javascript:alert('cut')"> </a>
</div></body>
</html>

其它地方不说了，就说一下那个href属性，我在实际学习的时候是基于一个SpringMVC框架写的样例。

后台代码：

@RequestMapping(value = "panel")
public ModelAndView panel(String _){
<span style="white-space:pre"> </span>System.out.println("****************进入后台*******************"+_);
<span style="white-space:pre"> </span>ModelAndView  mv =new ModelAndView("/panelDemo/panelData.jsp");
<span style="white-space:pre"> </span>mv.addObject("data", "Hello Hirain!!!");
<span style="white-space:pre"> </span>return mv;
}

为什么我的后台方法多了个參数String _呢？是由于我看到它实际请求的时候在url后面自己主动拼上了一个參数_，后台不接收这个參数也一样。

panelData.jsp内代码就仅仅有${data}

点此下载源码

jQuery Easy UI Panel(面板)组件相关推荐

第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
7个jquery easy ui 基本组件图解
下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...
jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
初学jQuery Easy UI的总结
1.使用jQuery Easy UI的目的: jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰 ...
jQuery Easy UI Accordion(可伸缩的面板)包
Accordion 可伸缩的面板组件.基于panel,示为以下的比率: <!doctype html> <html lang="en"><head&g ...
easyUI布局篇使用jquery easy UI的panel和layout实现界面的自适用窗口
1.问题: 最近在做AIUESUite v1.0的开发,基本上按照前期的规划,把现有的功能都一步步的实现,但是因为我们基于easy ui 的二次开发牵扯到屏幕的自适用问题一直都困扰着我们,这里我们针对 ...
第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
Jquery Easy UI Datagrid 上下移动批量保存数据
DataGrid with 上下移动批量保存数据通过前端变量保存修改数据集合,一次性提交后台执行本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...
JQuery Easy Ui dataGrid 数据表格 --转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容概况使用方法 ...

jQuery Easy UI Panel(面板)组件

jQuery Easy UI Panel(面板)组件相关推荐

最新文章

热门文章